奇怪的浮动清除问题

Question

我有一个非常基本的布局，即左侧菜单容器列的浮动 div 和内容区域带有左边距的全宽非浮动 div。

当我将浮动 div 放入内容区域时，它们会按预期浮动并放置，直到我清除浮动。

下一行浮动不会出现在前一行的正下方，而是一直出现在菜单栏底部的下方

正如你在下面看到的，布局没有什么特别的，但浮动问题让我发疯:)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;">
    floated left div
</div>
<div style="margin-left: 210px; border: 1px solid blue;">
    non floated right div containing floated divs inside<br />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
</div>

我做了一个jsfiddle来演示这个问题； http://jsfiddle.net/jP6e9/

Answer 1

这是一种奇怪的情况，您需要使用

overflow:auto

来获得您想要的东西。

<div style="margin-left: 210px; border: 1px solid blue;overflow:auto;">

jsFiddle 示例

您需要通过将溢出属性与浮动属性结合使用来触发块格式化上下文。

另请参阅：http://www.w3.org/TR/CSS21/visuren.html#block-formatting，http://www.yuiblog.com/blog/2010/05/19/css-101 -block-formatting-contexts/ 和 CSS 块格式化上下文如何工作？ 有关块格式化上下文的一些有用信息。

Answer 2

clear 属性将元素按给定方向推过

float

。 由于

clear: left

，这些元素被向下推过大浮动框。 “clear”属性不考虑元素本身内部或其他块格式化上下文中的浮动。

您可以通过在更宽的框中设置

overflow: hidden

来轻松创建新的块格式化上下文：http://jsfiddle.net/ExplosionPIlls/jP6e9/7/

Answer 3

这是因为您使用 sidebar

div

创建了一个浮动，但没有浮动 main

div

。只需将主要的

div

包含在浮动中，删除那个巨大的

margin-left

并用更保守的东西替换它：

<div style="margin-left: 20px; border: 1px solid blue; float: left">

最后，清除那个浮动：

<div style="clear: left"></div>

更新：

http://jsfiddle.net/jP6e9/1/

Answer 4

您可以使用 display: table-cell 作为右侧 div，如下所示：

<div class="left">floated left div</div>
<div class="right">
  non floated right div containing floated divs inside <br />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
</div>

CSS代码：

.left {
  float: left; 
  width: 200px; 
  height: 200px; 
  border: 1px solid red;
  margin-right: 10px;
}
.right {
  border: 1px solid blue;
  display: table-cell;
}
.floatItem {
  float: left; 
  border: 1px solid green;
}

请查看deom。

Answer 5

Float none 停止元素以停止环绕相邻的浮动元素。默认情况下，所有元素都没有浮动。清除两个停止元素以从左或右环绕任何浮动子元素。有关更多详细信息和实例，请访问我的教程，
https://tutorial.techaltum.com/css_float.html.