如何强制div不浮动答案

【问题标题】：How to force div from unfloating如何强制div不浮动
【发布时间】：2011-01-13 05:15:37
【问题描述】：

我通常使用表格来进行布局。但我想试试 Div 中的布局。这是问题所在，当我“浮动：向左”一个 div 时，它会使后续的 div 随之浮动。我试图将“float: none”放到下一个 div 以使其换行，但它不起作用。

这是我想要使用表格做的事情：

<hr style="width: 100%;" />
<table>
  <tr>
    <td>
      <div id="divLeftPane">
        ...
      </div>
    </td>
    <td>
      <div id="divCenterPane">
        ...
      </div>
    </td>
    <td>
      <div id="divRightPane">
        ...
      </div>
    </td>
  </tr>
</table>
<hr style="width: 100%;" />

这是我迄今为止尝试过的使用浮点数的 div：

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane">
    ...
  </div>
</div>
<hr style="width: 100%;" />

div使用的问题是底部

也向左浮动。我尝试将 float: none 放在最后一个 div、HR 标签甚至 divContainer 中。为什么最后一个小时浮动？

【问题讨论】：

标签： css html css-float

【解决方案1】：

这会给你想要的效果：

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane" style="float:left; ">
    ...
  </div>
  <div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />

浮动左边的 3 个 div 会使它们并排显示，但您会注意到 divContainer 不会占用其中 div 标签的高度。使用 clear:left 添加 div 基本上可以撤消此操作。

编辑：当你真正做到这一点时，避免使用内联样式。

【讨论】：

【解决方案2】：

使用属性

清除：左；

在底部元素上。

【讨论】：

【解决方案3】：

添加

#divContainer {
    overflow: hidden;
}

将在没有额外的 div 的情况下完成此操作

【讨论】：