Question

我很长时间没遇到这个问题了。我认为这对浮动布局来说是一个非常普遍的问题，我希望有人能给出“标准”的解决方案。

作为标题，问题在于嵌套浮动。请考虑以下简单布局：

<div class='parent clearfix'>
     <div id='child1' style='float:left; width:500px'>
         { ... child 1 content goes here ... }
     </div>
     <div id='child2' style='margin-left:501px;'>
         { ... child 2 content goes here ... }
     </div>
</div>

此处 clearfix 是自动清除浮动儿童的常用技巧。问题是，如果 child2 包含另一个 clearfix 元素，则布局会被破坏。例如，如果子2的内容是：

<div class='inside clearfix'>
    <div class='sub1' style='float-left; width:100px'> 
        { ... extra content goes here ... } 
    </div>
    <div class='sub2' style='margin-left:101px'> 
        { ... extra content goes here ... } 
    </div>
</div>

所以一般情况下，如果我们使用清除： 内部浮动布局（在非浮动元素内），它也会清除父容器。

如果使用绝对位置和一些js，我知道怎么做，但这不是一个好习惯。

如何使用 float 修复它？

谢谢！

Answer 1

你也可以使用overflow：hidden;

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}

在jsfiddle

上查看演示

Answer 2

在使用浮点数时，我遵循一种更简单的方法，即使用额外的div清除类。这更容易理解，更容易出错。

以下是我的所作所为：

<div class="parentClass">
    <div class="float1">
    . . .  
    </div>
    <div class="float2">
    . . .
    </div>
    <div class="clear"></div>
</div>

在CSS中，clear class如下：

.clear { clear:both; overflow:hidden; }

你可以尝试这种方法，我相信事情会很好。祝你好运！

CSS清除了孩子们内心

2 个答案: