父元素中的所有子元素如果设置float属性,那么父元素的高度会坍缩为0,这个问题怎么解决?目前知道的方法是设置父元素也浮动,或者设一个空的子div,然后style"clear:both",或者设置父元素的高度,但是这些都感觉有一些局限性,还有一个方法是父元素设置overflow:hidden;请问各位为什么这个方法可以解决问题,多余的内容隐藏跟父元素高度显示有什么关系吗?另外还有其他的方法吗?
这里有两篇文章你可以看看,一篇是讲overflow:hidden包裹性来清除浮动,一篇是关于BFC的。
http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/
根据张鑫旭老师的说法,就是overflow:hidden和position:absolute会有包裹性,这样就会包裹着浮动的元素,就是清除浮动了,当然我没有试过absolute能不能清除浮动。
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
还有就是BFC里面有两条规则:
1、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
2、计算BFC的高度时,浮动元素也参与计算
overflow:hidden会产生BFC,所以内部的子元素不会影响到父元素,所以高度不会塌陷。
一个有四个方法可以解决:
在浮动元素下面加一个清除浮动的元素:div{clear:both}
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;
}
将父元素也设置为浮动的
html
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
为父元素显式的设置高度,不推荐
html
<div style="height: 400px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
为父元素加入overflow:hidded
属性或者overflow:auto
属性
html
<div style="overflow: hidden;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
上面四种方案,方案一比较靠谱,兼容性最强