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