5

我有一个非常基本的左侧菜单容器列的浮动 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/

4

5 回答 5

3

overflow:auto这是你需要用来获得你想要的东西的那些古怪的情况之一。

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

jsFiddle 示例

您需要结合使用overflow 属性和float 属性来触发块格式化上下文。

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

于 2013-06-12T16:12:59.180 回答
2

clear属性将元素推过float给定方向的 a。由于clear: left，这些元素被向下推过大浮动框。'clear' 属性不考虑元素本身或其他块格式上下文中的浮动。

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

于 2013-06-12T16:13:28.010 回答
1

这是因为您使用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/

于 2013-06-12T16:07:44.310 回答
0

您可以使用 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。

于 2013-06-12T16:34:35.760 回答
0

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

于 2014-03-27T06:44:58.993 回答