HTML代码如下:
<div id="wrap">
<div id="inner"></div>
</div>
CSS 清除浮动方案
(1)给浮动的父级元素加高度,缺点:浮动元素高度不确定的时候不适用
#wrap{
border: 1px solid;
height: 300px;
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}
(2)开启BFC:让浮动的子元素库撑开父级的高度
#wrap{
border: 1px solid;
overflow: hidden; /*触发bfc*/
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}
(3)br 标签清除浮动
<div id="wrap">
<div id="inner"></div>
<br clear="all" />
</div>
(4)空标签清除浮动
<div id="wrap">
<div id="inner"></div>
<div style="clear: both;"></div>
</div>
(5)伪元素 + 开启haslayout—终极解决方案
/*开启haslayout-兼容 IE6,7*/
.clearfix {
*zoom: 1;
}
/* 万能清除法 after伪类 清浮动 -主流方法*/
.clearfix:after {
content: "";
display: block;
clear: both;
height:0;
overflow:hidden;
visibility:hidden;
}
标签:
CSS