CSS：什么是文档流？什么是浮动？浮动的原理（面试题）

文档流

概念：

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

特点：（块元素，行内元素）

所有的块级元素在父元素直接从上到下排列。

所有的行内元素在父元素中从左到右排列。

 

浮动：

什么是浮动？

　　元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的饿元素 会挨着浮动的元素排列)

 

float：left、right、none

特性：

1. 脱离文档流；
2. 会影响其他元素的显示方式；
3. 其他元素会当作浮动元素不存在；
4. 行内元素设置了浮动之后 会被当作inline-block元素解析；
5. 块级元素浮动之后 宽度默认不会是父元素的100%； 需手动设置；
6. 不管怎么浮动 都在父元素里面；
7. 如果父元素没有高度 子元素不会撑开父元素；

 

清除浮动：

清除其他浮动元素带给我们的影响；

clear left；

clear right；

clear both；（最常用）

浮动的原理：

父元素和冗余元素的高度都为0，并且浮动元素会盖在其上方，当设置clear：both时，冗余元素会躲开浮动元素直到不被其盖住，而父元素为了包裹住他自然就撑开了

 

浮动带来的问题的解决办法

1. 给父元素加高度；
2. BFC布局；

overflow：hidden；

display：block；

 

　　3.在父元素的浮动子元素后面后面加一个空div标签，清除浮动；

　　4.给父元素设置为元素；空div加强版；

::after{

clear：both;

content：‘ ‘；

}