根据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