CSS脱离文档流&浮动

什么是文档流？

将窗体从上至下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

 

什么是脱离文档流？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方，处在另一个平面）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

 

脱离文档流的几个方法

1. 绝对定位(absolute)

绝对定位是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static（也就是设置了position属性）定位的。

2. 固定定位(fixed)

完全脱离文档流，相对于浏览器窗口进行定位（相对于浏览器窗口就是相对于html）。

3. 浮动(float)

浮动就是使元素漂浮在父级元素的左边或右边的方法

注意：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

 

浮动产生的负面效果

1. 背景不能显示

由于浮动产生，如果对父级设置了背景颜色或背景图片，而父级不能被撑开(这是浮动的一个很重要的结果)，所以导致背景不能显示。

2. 边框不能被撑开

如果父级设置了边框(border)属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3. margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了padding、margin属性的值不能正确表达(本质还是设置后父级没有被撑开的缘故)，注意这里不能正确表达是指达不到想要的效果，实际上padding和margin还是起作用的

4.文本环绕效果（姑且算负面效果）

如果给换一个元素设置浮动，那么其他盒子会无视这个元素，但其他盒子内的文本还是会为这个元素让出位置，形成文字环绕效果

 

 

清除浮动的方法

1 对父级标签设置适合的高度

一般来说，而我们不会给父级标签设置高度，是因为我们想通过内容来自动调整（自适应高度），但是设置浮动后，父级标签不再具有自适应高度的能力，因此我们可以手动设置父级标签的高度

2. 使用clear: both清除浮动

 在父级标签中加入class=“clear"，让后设置.clear{ clear:both} 

<style>
.clear {
clear:"both"

}
</style>
<div class="clear"></div>

3. 给父级标签设置overflow: hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

 

参考地址：https://blog.csdn.net/qq_42204313/article/details/82682261