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

这个问题在这里已经有了答案：

我可以使用哪些“clearfix”方法？ 28个答案

---

解决方案1：

最可靠和不显眼的方法似乎是这样的：

演示：http://jsfiddle.net/SO_AMK/wXaEH/

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

有了一点CSS定位你甚至不需要添加一个类到父DIV 。

此解决方案向后兼容IE8，因此您不必担心旧版浏览器失败。

解决方案2：

有人建议对解决方案1进行调整，具体如下：

演示：http://jsfiddle.net/wXaEH/162/

HTML：

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS：

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

此解决方案似乎向后兼容IE5.5，但未经测试。

解决方案3：

也可以设置display: inline-block; 和width: 100%; 以模拟正常的块元素，而不崩溃。

演示：http://jsfiddle.net/SO_AMK/ae5ey/

CSS：

.clearfix {
    display: inline-block;
    width: 100%;
}

此解决方案应向后兼容IE5.5，但只在IE6中进行过测试。

---

我通常使用overflow: auto技巧; 尽管严格来说，这不是严格意义上的溢出用途，但它有点相关 - 当然，足以让它易于记忆。 float: left的含义已经扩展到各种用途，比本例中的溢出更为显着，IMO。

---

当一个浮动元素位于容器框内时，该问题发生，该元素不会自动强制容器的高度调整为浮动元素。 当一个元素被浮动时，它的父元素不再包含它，因为浮动元素被从流中移除。 你可以使用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%;
}

示范:)

链接地址: http://www.djcxy.com/p/2547.html

上一篇: How do you keep parents of floated elements from collapsing?

下一篇: Why is the Bootstrap grid layout preferable to an HTML table?