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

Question

在这个例子中http://jsbin.com/inoka4没有为父元素定义宽度

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

那么我们可以用5种方式来实现

• 给予float也给<div class="container">
• overflow:hidden或 overflow:auto
• 对 <div class="container clearfix"> 的任何 clearfix hack
• 将高度赋予 <div class="container">
• 在 2 之后再添加一个 html 元素(例如另一个 div 或 <br > ) <div class="container"> 中的盒子在此处输入代码 and give 清除:左or :两者or :正确的 元素

我的问题是除了float之外的任何其他选项不要对 <div class="container"> 进行任何更改和内盒宽度。但如果我们使用 float:left或 right到父框然后它会缩小整个框和内部框。

为什么？

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

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

Answer 1

我认为更好的选择是使用 overflow:hidden。这是一个简单的一行更改，并且有效。

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

添加额外的 div 以进行明确修复需要更改 html 以获取真正的 css。或者，当通过像...这样的 hack 使用 clear fix 时。

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

您的 CSS 变得更大更困惑。但它仍然是一个不错的选择(尤其是当你需要让东西溢出盒子的时候)

引用: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/