1.CSS中的浮动闭合问题
CSS中存在浮动的闭合问题,当父元素的高度自适应,子元素在父元素内浮动,结果是父元素无法闭合
子元素,造成父元素塌陷。距离来说:
<div class="container">
<div class="div1">子元素</div>
</div>
<style>
.container{
width:200px;
border:2px solid red;
}
.div1{
width:100px;
height:100px;
background-color:blue;
float:left;
}
</style>
结果为:
我们发现父元素无法闭合子元素,因为子元素的浮动造成了父元素的塌陷。
2.为了解决这个问题,我们可以采用CSS中的浮动的清除
(1)在结尾处加一个空元素,并设置clear:both;
<div class="container">
<div class="div1">子元素</div>
<div class="clearfix"></div>
</div>
<style>
.clearfix{
clear:both;
}
</style>
结果为:
清除了浮动,并且闭合了父元素;
(2)通过CSS伪类:after来清除浮动
.clearfix:after{
content:"";
clear:both;
display:block;
visibility: hidden;
height:0;
}
.clearfix{
zoom:1;
}
(3)通过BFC(块级格式化上下文来清除浮动)
请参考http://blog.csdn.net/liwusen/article/details/50771200中对于BFC的描述
简单的说,就是通过给父元素添加下面几个属性,使其变成BFC模型
具体来说可以添加一下属性之一: overflow:hidden,overflow:scroll等
float:left/right;
position:absolute/relative/fixed;