什么是浮动

排版

1. css设计的目的是排版与美化；

2. 有两种显示元素，块级元素和行内元素；

3. 块级元素：按照从上到下的方式逐个排列，独占一行；

4. 行内元素：按照从左到右的方式逐个排列，多个元素可以在同一行显示；

如何让块级元素在同一行

浮动点位可以达到目的，当初设计浮动的目的是实现元素文字包裹，应用在报纸排版上；

普通文档流

普通流，就是按照以下两种排版；

1. 块级元素：按照从上到下的方式逐个排列，独占一行；

2. 行内元素：按照从左到右的方式逐个排列，多个元素可以在同一行显示；

如行云流水，一一排列；

脱离文档流

所谓脱离，是指元素在排版时，不遵循普通文档流，页面渲染时，会忽略其存在一样；

既然脱离了，那么特点是不再占用原来的空间了；

浮动和绝对定位、固定定位都是脱离文档流，但又有差异；

浮动

1. 浮动元素是脱离文档流的，排在浮动元素后的元素，是视而不见浮动元素的存在，会去补位或占用其原来的位置，因此浮动元素后的元素边界是靠左或靠右的；

2. 元素浮动后，但后边的文字是认为其存在的,因此文字是排版在浮动元素外，不占用浮动元素的位置，这样就形成了文字环绕效果；

3. 浮动元素与父容器，由于脱离文档流，父容器认为浮动元素是不存在的，不占用空间，父容器的高度等于父容器内的其他非浮动元素的高度；

4. 基于第三点，由于浮动，无法支撑父元素，导致父元素没有了高度，这种现象称为塌陷；

5. 浮动元素的display会被设置为block;宽度自适应内容, 有点像inline-block;

如何解决塌陷

1. 使用BFC;什么是BFC，哪些css属性和值会触发BFC，文章很多，BFC是格式化上下文，是一个独立的渲染区域，是隔离的独立容器；
2. 常见 overflow 除了 visible 以外的值（hidden，auto，scroll）；定位元素，position（absolute，fixed）；