## 前言 css中的浮动向来是前端入门必备的知识点，也是在面试中都会提及的点，有些人也可以用简单的overflow:hidden来解决浮动带来的显示问题。但作为一名优秀的前端，必须对浮动做到知根知底。 ## 浮动的概念 通常为了使块级元素能够水平排列，我们会将需要这样显示的元素设置浮动来实现需要的效果。常用的浮动有左浮动，右浮动，以及none.对应的css 属性为：float:left;right;none. ## 注意事项 1. 使用浮动的元素必须为块级元素，对于行级元素以及行内块级设置浮动是没有意义的，因为行级和行内块级本来就是水平排列 注意浮动的顺序，如果按照左浮动，会按照文档的代码顺序从左到右显示，如果为右浮动，会从右到左，按照自己的设计稿效果，选择正确的浮动方式 1. 使用浮动的块级元素必须设置正确的宽高，如果不设置，块级元素默认为父元素的宽度，即使设置了浮动，视觉效果也是不浮动的。设置正确的宽高后，当同一行放不下最后一个元素时，会放到下一行继续水平排列 设置浮动后，会脱离标准的文档流，需要在浮动结束之后，清除浮动 ## 引发问题 1. 父元素盒子模型得不到正确的宽高，导致边框、内边距错误 2. 父元素盒模型不正确导致的相关显示属性，如父元素的背景，根据父元素定位的元素 3. 父元素盒模型不正确导致的父元素之后的元素错位 ## 清除浮动 1. 浮动元素能确认高宽的情况下，对父元素的高宽进行设定 2. 设置父元素overflow:hidden或者auto 3. 设置父元素为浮动，也可以重新获取高度 4. 设置父元素的伪元素来实现 5. 清除浮动全局样式 ``` css .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clearfloat { zoom: 1 } ``` 6\. 父元素设置宽度之后，设置display:table 7\. 父元素末尾追加br标签 ，内置clear:both ## 总结 综上 ，清除浮动最简单的方式是overflow:hidden（推荐）,最官方的写法是写一个全局的清除浮动样式（可能浏览器支持不好）