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 example

您需要通过将overflow属性与float属性结合使用来触发block formatting context。

另请参阅：http://www.w3.org/TR/CSS21/visuren.html#block-formatting，http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/和How does the CSS Block Formatting Context work?，了解有关块格式设置上下文的一些信息。

Answer 2

clear属性按给定方向推送元素超过float。由于clear: left，这些元素被向下推过大浮动框。＆＃39;清除＆＃39; property不考虑元素本身或其他block formatting contexts中的浮点数。

您可以通过在更宽的框中设置overflow: hidden轻松创建新的广告代码格式设置上下文：http://jsfiddle.net/ExplosionPIlls/jP6e9/7/

Answer 3

这是因为您使用侧栏 div创建了一个浮点数，但没有浮动 main div。只需在您的浮动广告中加入主div，删除大量margin-left并将其替换为更为保守的内容：

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

最后，清除 float：

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

更新：

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

Answer 4

你可以使用display：table-cell for right 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无法阻止元素停止相邻浮动clild周围的包裹。默认情况下，所有元素都有float none。清除两个停止元素以从左或右包围任何浮动子项。有关更多详细信息和实例，请访问我的教程，
http://tutorial.techaltum.com/css_float.html。

奇怪的漂浮问题

5 个答案: