尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.
例如:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.
我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.
浮动父母.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？
给父母一个明确的高度.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.
在父元素中添加"spacer"元素,如下所示:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div …CSS2.1规范要求overflow除了visible建立新的"块格式化上下文"之外.这让我觉得很奇怪,一个明显的目的是隐藏溢出而不影响布局的属性实际上确实会以一种主要方式影响布局.
看起来像溢出值除了visible组合两个完全不相关的特征之外:是否创建了BFC以及是否隐藏了溢出.它不像"溢出:隐藏"在没有BFC的情况下完全没有意义,因为浮动历史上可以溢出它们的父元素,隐藏溢出而不改变布局似乎是明智的.
这个决定背后的原因是什么,假设它们已知？那些参与规范工作的人是否描述了为什么决定这种情况？
您知道这个古老的问题:包含浮动元素的容器不会自动扩展其高度以包围其子级.
修复此问题的一种方法是"clearfix",它添加了许多CSS规则以确保容器正确伸展.
但是,只是提供容器overflow: hidden似乎也可以正常工作,并具有相同的浏览器兼容性.
根据本指南,这两种方法兼容当今所有重要的浏览器.
这是否意味着"clearfix"已被弃用？使用它还有什么好处overflow: hidden吗？
这里有一个非常相似的问题:clearfix hack和overflow之间有什么不同:hidden vs overflow:auto？ 但问题并没有真正回答那里.
当我创建我的(第一个!)两列时,我的问题出现了.
我的左右列有一个包装器,但是包装器的高度没有扩展到适合左右列,每个列分别浮动到它的侧面.
我在网上找到了一个解决方案,它添加了样式(这是正确的词吗？)'overflow:auto'到包装器.经过一些研究,我发现了几篇解释溢出功能的文章,包括这个stackoverflow答案:为什么"overflow:hidden"清除浮动？
但是,我的研究中没有任何内容能够解释为什么包装器的高度不会自动扩展以适应嵌套的div,即两列.
嵌套在div中的所有东西都不包含在div中吗？这不会为内部元素创建边界吗？
对于这个noobie,任何帮助都表示赞赏.谢谢!
当我展开向右浮动的评论体时,我的容器不会随之扩展.我怎样才能解决这个问题？
更好的解释:http://jsfiddle.net/5fmpp/
我一直在寻找以清除浮动,并找到最好的方法完美的解决方案,如果你看看答案,该解决方案使用display:table,而不是display:block,原因进行了说明:
如果用于包含子元素的顶部边距,则仅使用
table而不是block必需:before.
我尝试理解其含义,我做了一些测试,但我无法弄清楚使用的原因是什么display:table,如果有人可以提供代码示例来显示差异和需要使用display:table.
编辑:
这是一个小提琴,我试着测试差异,我敢肯定有一个,但我无法弄清楚要测试什么.
编辑说明:
我的问题不在于显示之间的区别block/table,我的问题是关于使用display:table和不使用的原因display:block(关于清除浮动),布莱恩从这个答案中得到了解释,但我无法理解其中的原因,如果任何人都可以解释原因,并提供一个代码示例来说明差异.