清除浮动总结
浮动
-
不占文档流
-
浮动只会影响后面的文档流
-
给父元素不添加高度加浮动会导致父元素没有高度,想要父元素不加高度子元素可以使用浮动,且不影响下面的文档流,就需要清除浮动
-
额外标签法清除浮动
<style> li{ float:left; } .clear { clear:both; } </style> <body> <div> <ul> <li>1111</li> <li>22222</li> <div class='clear'></div> </ul> </div> </body>
-
给父级元素添加 overflow (子不教父之过) overflow:hidden
- 缺点:无法显示出溢出的部分
- 优点:代码简洁
-
:after 伪元素 也是给父元素添加的 *
.clearfix:after{ content:''; display:block; clear:both; visiblity:hidden; }
- 优点:结构简单,代码简洁
- 缺点:照顾低版本浏览器
-
父级双伪元素 也是给父元素添加的 *
.clearfix:before,.clearfix:after{ content:'', display:table; } .clearfix{ clear:both; } .alearfix{ *zoom:1 }
- 优点:结构简单,代码简洁
- 缺点:照顾低版本浏览器
-