跳到主要内容

float

清除浮动​

当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。那么怎么清除浮动带来的影响呢?

方式一、给父元素单独定义高度​

给父元素单独定义高度 好处是快速简单，代码少；缺点是无法进行响应式布局

方式二、父级定义 overflow：hidden；zoom：1（针对ie6 的兼容）​

父级定义 overflow：hidden；zoom：1（针对ie6 的兼容） 简单快速、代码少，兼容性较高缺点：超出部分被隐藏，布局时要注意

方式三、在浮动元素后面加一个空标签 ，clear：both；height：0；overflow：hidden​

在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden 优点：简单快速、代码少，兼容性较高。缺点：增加空标签，不利于页面优化

方式四、父级定义overflow：auto​

父级定义overflow：auto 优点：简单，代码少，兼容性好缺点：内部宽高超过父级div 时，会出现滚动条

方式五、万能清除法-给塌陷的元素添加伪对象​

万能清除法-给塌陷的元素添加伪对象 优点：写法固定，兼容性高缺点：代码多