html清除父元素浮动,CSS-恢复父元素因子元素浮动而失去的高度

如下，.box父盒子内含一个浮动的盒子.floated，浮动的盒子有高度100px，其父盒子则没有指定高度。如何使得父盒子获得子盒子的高度？

Document

.floated{

float:left;

width:100px;

height:100px;

border:1px solid red;

background-color:#e69;

}

.box{

border:1px solid blue;

width:200px;

}

浏览器中效果是这样的，父盒子“坍塌”了，没有高度。

父盒子“坍塌”

要恢复相应的高度，你可能听过给父盒子添加一个”clearfix”样式。它一般这样子定义：

.clearfix{

zoom:1;

}

.clearfix::after{

content:"";

display:block;

height:0;

clear:both;

}

为父盒子.box添加这个”clearfix”样式后，高度恢复了。

高度恢复

它的原理简单解释如下：

在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

在标准浏览器下，.clearfix::after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

或许你还听过这种做法，在要清除浮动的元素比如这里的.floated后面添加一个div，设置它的clear:both也能达到目的，原理应该是一样的：

如上，添加这么一个clear:both的div也能恢复父盒子的高度。

其实，这里仅为父盒子添加overflow:hidden，或者设置它display:table，再或者也设置为float:left，都能恢复它的高度(但这种方法往往会破坏排版)。背后具体的原理是什么呢？

具体的原理是构成Block Formatting Context元素可以清除其内部元素浮动。一般方法有：

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何一个。

position的值不为relative和static。

因此，要清除元素内部元素的浮动获得正常的高度，可以从上边选择合适的方案。

2015/01/12补充：

今天在群里看到有人说子元素绝对定位也会让父元素失去高度，一试确实如此。再次查询相关信息，嗯嗯，我可怜的CSS知识又长进了。

父元素高度为0这种情况，准确说法是闭合浮动。元素float或者position为absolute(fixed为absolute的一个子集，当然也包括它)会使元素脱离普通流(国内一般称文档流)，因而使父元素失去高度。所以，要定位子元素时不要使用absolute，使用relative即可。关于闭合浮动的方法，更详细的说明参考以下链接：