清除浮动总结
浮动
-
不占文档流
-
浮动只会影响后面的文档流
-
给父元素不添加高度加浮动会导致父元素没有高度，想要父元素不加高度子元素可以使用浮动，且不影响下面的文档流，就需要清除浮动
-
额外标签法清除浮动
<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 }- 优点：结构简单，代码简洁
- 缺点：照顾低版本浏览器
-
