经典面试题：解决浮动最强攻略

前言

css中的浮动向来是前端入门必备的知识点，也是在面试中都会提及的点，有些人也可以用简单的overflow:hidden来解决浮动带来的显示问题。但作为一名优秀的前端，必须对浮动做到知根知底。

浮动的概念

通常为了使块级元素能够水平排列，我们会将需要这样显示的元素设置浮动来实现需要的效果。常用的浮动有左浮动，右浮动，以及none.对应的css 属性为：float:left;right;none.

注意事项

1. 使用浮动的元素必须为块级元素，对于行级元素以及行内块级设置浮动是没有意义的，因为行级和行内块级本来就是水平排列 注意浮动的顺序，如果按照左浮动，会按照文档的代码顺序从左到右显示，如果为右浮动，会从右到左，按照自己的设计稿效果，选择正确的浮动方式
2. 使用浮动的块级元素必须设置正确的宽高，如果不设置，块级元素默认为父元素的宽度，即使设置了浮动，视觉效果也是不浮动的。设置正确的宽高后，当同一行放不下最后一个元素时，会放到下一行继续水平排列 设置浮动后，会脱离标准的文档流，需要在浮动结束之后，清除浮动

引发问题

1. 父元素盒子模型得不到正确的宽高，导致边框、内边距错误
2. 父元素盒模型不正确导致的相关显示属性，如父元素的背景，根据父元素定位的元素
3. 父元素盒模型不正确导致的父元素之后的元素错位

清除浮动

1. 浮动元素能确认高宽的情况下，对父元素的高宽进行设定
2. 设置父元素overflow:hidden或者auto
3. 设置父元素为浮动，也可以重新获取高度
4. 设置父元素的伪元素来实现
5. 清除浮动全局样式

.clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}           
.clearfloat {
    zoom: 1
}
复制代码

6. 父元素设置宽度之后，设置display:table 7. 父元素末尾追加br标签 ，内置clear:both

总结

综上 ，清除浮动最简单的方式是overflow:hidden（推荐）,最官方的写法是写一个全局的清除浮动样式（可能浏览器支持不好）