css如何清除浮动?清除浮动有哪些方法有效?ie低版本如何清除浮动?关于清除浮动布局,很多面试官都喜欢问,七娃总结了常见的六种,看看有没有你没有用过的吧!
面试题十:清除浮动有哪些方法?-Qui-Note
1.父盒子使用overflow清除浮动;

{overflow:hidden}

原理:父盒子开启BFC块级渲染布局。
缺点:子元素用定位超出父盒子范围会被隐藏!

2.父盒子使用dispaly变成行内块;

{dispaly:inline-block}

原理:父盒子开启BFC块级渲染布局。 
缺点:打破了父盒子BFC布局方式,块级可能会错位!

3.父盒子及同级也使用浮动;

{float:left/right}

原理:整体页面都采取浮动布局,
缺点:打破了bodyBFC布局方式。任意一个块级不浮动,就错位!

4.父盒子设置高度;
{height:320px}
原理:浮动子元素的高度都小于父盒子高度,盒子高度不会崩塌。
缺点:写死了高度,不灵活了!

5.新增子空盒子,设置clear属性;

<div class="clear"></div>
.clear{clear:both}

原理:利用clear属性清除子元素的浮动,撑起父盒子高度。
缺点:多了个空元素!

6.父盒子使用伪元素;

.clear{display:inline;zoom:1}
.clear:after{display:block;overflow:hidden;clear:both;height:0;visibility:hidden;content:"."}

原理:伪元素代替方法5的空盒子,清除子元素浮动。
缺点:代码多;优点:兼容ie低版本