面试问题总结--清除浮动的几种方法

面试问题总结–清除浮动的几种方法

清除浮动的核心理念就是想办法让浮动元素的父元素有高度, 事情就解决了.
1）父级定义height：
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
简单、 代码少、容易掌握 ，但只适合高度固定的布局.

2）结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，
让父级div自动获取高度。
如果页面浮动布局多，就要增加很多空 div，添加无意义标签，语义化差。

3）父级 div 定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用.

4）父级 div 定义 overflow：auto；
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5）父级 div 定义 伪类：after 和 zoom（推荐）
//清除浮动代码

    //清除浮动代码
   .clearfix:after {
     content: "";
     display: block;
     clear : both;
     visibility: hidden;
     height :0;
     line-height :0;
   }
  .clearfix {zoom: 1}

原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 专有属性)
可解决 ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。

6) 双伪元素法：（推荐）

.clearfix:before , 
.clearfix:after {
content: "";
display: block;
clear : both;
}
.clearfix {
zoom :1;
}