当我们将float赋给父元素以清除float时，为什么float的行为与其他选项不同？

Question

在此示例http://jsbin.com/inoka4中，没有为父元素

定义宽度

如果我想在容器边框中包装红色框。

然后我们可以用5种方式做到这一点

• 将float也提供给<div class="container">
• overflow:hidden或overflow:auto
• 任何clearfix hack <div class="container clearfix">
• 给予<div class="container">
的高度
• 在2之后再添加一个html元素（例如另一个div或<br >） <div class="container">中的框在此处输入代码and give clear：left or：or：right` to that 元件

我的问题除float之外的任何其他选项都不会对<div class="container">和内部框宽度进行任何更改。但如果我们将float:left或right用于父框，那么它也会缩小整个框和内框。

为什么？

示例链接：http://jsbin.com/inoka4

编辑：我的问题不在于我应该使用哪种方法，问题是为什么Float缩小宽度

Answer 1

我认为更好的选择是使用overflow：hidden。这是一个简单的换行，它可以工作。

div#container {
    ...
    overflow: hidden;
}

添加额外的div以进行明确修复需要在html中更改真正的css。或者，当通过做像......这样的黑客使用清除修复时。

div:after {
    content:....
    ...
}

你的CSS越来越大，越来越混乱。但它仍然是一个不错的选择（特别是当你需要让东西溢出时）

参考： http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/

Answer 2

如果你不在容器上使用浮动，它的宽度设置为100％。如果添加浮动，它只需要占用所需的空间。在这种情况下，宽度由内部的两个div计算。

要将红色框包装在容器边框中，除了向容器添加浮动外，没有其他选项。唯一的另一种选择是绝对定位所有元素，但在这种情况下，您必须事先知道所有元素的宽度和高度。所以这真的不是一种选择。

所以我的建议是在容器上使用float并在容器后面的元素上添加一个clear：

Answer 3

你最好的办法是永远清理你的花车。在你用类.right关闭div之前，就在你用类.container关闭div之前，添加一个像这样的新div：

<div class="clear"></div>

.clear只是样式表中的{clear:both;}。这就是我整天使用的东西，就像一种享受。

最终的标记是：

<div class="container">
    <div class="left"> ... </div>
    <div class="right"> ... </div>
    <div class="clear"></div>
</div>

编辑：就像你上一个例子一样，显然。 ：）