<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style> /* 1.直接给父元素添加高度 扩展性不好 2.父元素添加overflow: hidden; ie6 7 底下不支持BFC 3.父元素添加浮动，float: left ie6 7 底下不支持BFC 4.通过添加br标签 <br clear='all' /> ie6 不支持 违反了结构 行为 样式 相分离的原则 5.通过空标签clear: both 清楚浮动<div style='clear: both;'></div> 违反了结构 行为 样式 相分离的原则 ie6 下元素的最小高度为19px（设置高度1-19px 都是19px） 可以尝试给元素的fontsize设置0到2px 6.伪元素清除浮动 父元素中添加样式和伪元素样式 *zoom: 1; :after{ content: ''; display: block; clear: both; } 如果要考虑ie6 ie7 最好的方法是伪元素 + 开启haslayout 不考虑的话伪元素就是最好的方法 因为ie6 7 不支持伪元素，所以要额外的去开启 haslayout */ * { margin: 0; padding: 0; } #wrap { border: 2px solid #ddd; /*1.直接给父元素添加高度，有点low*/ /*height: 300px;*/ /*2.父元素添加overflow: hidden;*/ /*overflow: hidden;*/ /*3.通过开启BFC，父元素添加float: left*/ /*float: left;*/ } #inner { float: left; width: 200px; height: 200px; background-color: pink; } /*6.伪元素清除浮动*/ .clearFloat { *zoom: 1; } .clearFloat:after { content: ''; display: block; clear: both; } </style> </head> <body> <div id='wrap' class='clearFloat'> <div id='inner'> </div> <!--4.通过添加br标签 <br clear='all' />--> <!--<br clear='all'>--> <!--5.通过clear: both 清楚浮动--> <!--<div style='clear: both;'></div>--> </div> </body> </html>