面试题 -- 浮动元素引起的问题和解决办法?

为什么使用浮动

很多网页布局效果，标准流是做不到，所以就要是用浮动来完成布局，浮动可以改变排列方式。

浮动元素引起的问题

1. 父元素高度塌陷，高度无法撑开；影响与父元素同级的元素。
2. 与元素同级的非浮动元素会紧随其后(遮盖现象)。
3. 如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示的结构

解决办法

使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决 2、3问题，对于问题1，添加如下样式，给父元素添加 clearfix样式:

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

清除浮动的方法

参考文章：清除浮动的几种方法及优缺点