如何防止浮动元素的父母崩溃？

Question

如何防止浮动元素的父母崩溃？虽然像这样的元素<div>S通常使用float属性会给CSS新手带来一个令人吃惊的问题：如果浮动元素具有非浮动父元素，则父元素将崩溃。例如：<div>  <div style="float: left;">Div 1</div>  <div style="float: left;">Div 2</div></div>本例中的父div将不膨胀要控制它的漂浮子-它似乎有height: 0.你怎么解决这个问题？我想在此提出一个详尽的解决办法清单。如果您意识到跨浏览器兼容性问题，请指出它们。解决方案1让父母浮起来。<div style="float: left;">  <div style="float: left;">Div 1</div>  <div style="float: left;">Div 2</div></div>行家*语义代码。反方：您可能不总是希望父级浮动。即使你这样做了，你会让父母的父母浮起来吗，依此类推？你必须让每个祖先元素浮起来吗？解决方案2给父母一个显式的高度。<div style="height: 300px;">  <div style="float: left;">Div 1</div>  <div style="float: left;">Div 2</div></div>行家*语义代码。反方不灵活-如果内容更改或调整浏览器大小，布局将中断。解决方案3在父元素中追加一个“间隔”元素，如下所示：<div>  <div style="float: left;">Div 1</div>  <div style="float: left;">Div 2</div>  <div class="spacer" style="clear: both;"></div></div>行家*简单易懂的代码。反方没有语义；间隔div仅作为布局黑客存在。解决方案4将父级设置为overflow: auto.<div style="overflow: auto;">  <div style="float: left;">Div 1</div>  <div style="float: left;">Div 2</div></div>行家：不需要额外的div。反方看上去像是黑客-那不是overflow财产的指定用途。评论？其他建议？

Answer 1

我通常使用overflow: auto虽然严格地说，这并不是用于溢出的目的，但它是有点联系-足够容易记住，当然。意义float: left在本例中，海事组织已将其扩展到各种用途，而不是溢流。

Answer 2

当浮动元素位于容器框中时，问题就会发生，该元素不会自动强制容器的高度调整到浮动元素。当元素被浮动时，它的父元素不再包含它，因为浮点数被从流中移除。您可以使用两个方法来修复它：

• { clear: both; }

• clearfix

一旦您了解了正在发生的事情，请使用下面的方法“清除”它。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;}.clearfix {
    display: inline-block;}html[xmlns] .clearfix {
    display: block;}* html .clearfix {
    height: 1%;}

示范：)