## 清除浮动 清除浮动主要为了解决父级元素因为子级元素浮动引起的内部高度为0的问题. 标准流当中,子元素有多高,父级高度就撑起来多高.这种情况不方便给父元素高度.比如不知道内容有多少. 一般情况下让里面的元素自动撑开盒子. ## 父元素添加overflow 1.父元素添加 overflow : hidden . 触发BFC,BFC可以清除浮动,这是解决方案. 缺点就是内容多的时候,内容会被隐藏掉 . ## 额外标签法 W3C推荐的. 在浮动盒子的后面添加一个空盒子. 添加属性 clear:both ; 缺点是增加无意义的标签. 平时不这样用. ## after 伪元素清除浮动 在父元素添加额外类,添加以下内容. 缺点是低版本不认识这个visibility. ``` .clearfix:after{ content: '.'; //内容为小点,尽量不要加空,否则浏览器有间隙 display: block; height: 0; visibility: hidden; //隐藏内容 clear:both; } .clearfix{ *zoom: 1; //代表带有* 号的属性,只有IE6和7才执行,zoom就是IE6,7来清除浮动的 } ``` ## 双伪元素清除浮动 推荐使用这种方法, 代码更简洁. 在父元素添加属性 ``` .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix{ *zoom: 1; } ```