根据BFC第四条规则:
计算BFC的高度时,浮动元素也参与计算。(清楚浮动hasayout)
清除浮动目的:让浮动的子元素库能够撑开父级的高度。
如图内部盒子浮动后,外部盒子无高
解决方法:
一、外层直接添加高度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style> *{ margin:0; padding:0; } .wrap{ border:2px solid red; height: 300px; } .inner{ width:300px; height: 300px; background: green; float:left; } </style> </head> <body> <div class="wrap"> <div class="inner"></div> </div> </body> </html>
二、开启BFC:根据BFC布局规则,开启了BFC浮动高度有效
.wrap{
border:2px solid red;
/*开启BFC*/
overflow:hidden;
/*position:absolute;*/
/*display: inline-block;*/
zoom:1;/*开启hasyout,兼容ie6,7*/
}
三、<br/>标签:利用其clear属性
<div class="wrap"> <div class="inner"></div> <br clear="all" /> </div>
四、空标签
<div class="wrap"> <div class="inner"></div> <div style="clear: both;"></div> </div>
五、伪元素
<style> *{ margin:0; padding:0; } .wrap{ border:2px solid red; } .inner{ width:300px; height: 300px; background: green; float:left; } /*开启hasyout*/ .clearfix{ *zoom:1; } /*ie6,7不支持伪元素*/ .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="wrap clearfix"> <div class="inner"></div> </div> </body>
总结:几种方法对比
1、给父级加高度,扩展性不好
2、开启BFC overflow:hidden 定位 浮动,ie6,7底下不支持BFC
3、br标签:ie6不支持,违反了结构、样式、行为相分离的原则
4、空标签:违反了结构、样式、行为相分离的原则,ie6下元素的最小高度为19px;可以尝试给元素的font-size:0,但仍存在2px;
5、伪元素+开启haslayout,因为ie6,7下不支持伪元素,所以还要开启BFC;
原文:https://www.cnblogs.com/LiuQyu/p/13394792.html