CSS脱离文档流&浮动

什么是文档流？

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

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

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

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

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

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

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

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

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

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

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

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

<style>
    .clear {
        clear:"both"
    }        
</style>    

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

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

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