css篇 -- （二）浮动

浮动（概念）：浮动就是使元素脱离文档流，漂浮在文档流的上方，按照指定的方式（左移、右移），直到浮动元素的外边缘碰到父级元素的左边界或右边界；

了解一下：

文档流：概括地说其实就是一系列字符，是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的。

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

下面回归到浮动的问题：

浮动的问题之所以难理解，是因为有的时候不能清楚的将浮动元素的位置定义，而浮动实际在我们的项目中所产生的异常效果处理起来很棘手；

之前在一个视频上看到有位前辈的解释，我个人感觉很通俗，加上我个人的理解后，可以这样解释：将你自己比作文档流中的元素，你所在的地方（比如都市、黑土地、黄土地、热带雨林、海上）可以比作你所设置的background（背景–背景色、背景图片）；大家在大地上行走拥有规则可以认为是按照文档流的规则排列，当产生了浮动或者定位的时候，你可以认为这一层是云层，而脱离文档流可以认为是你的哥们作死上天了，他在天上待着的时候跟你玩的规则不一样，重新排列了；

下面我会举一些例子，来示意脱离文档流时的效果：

1、正常的块级元素，未产生浮动时的效果：

2、假设你是1，你哥们元素二产生了浮动，也就是说你哥们作死上天了，这时他在地面上的位置就空出来了，你另一个哥们子元素3现在就可以占据他的位置，但是展现在用户面前时则会显示元素2将元素三遮盖住，看不到但他实际上是存在于元素2下面的一层，即地面上，此时元素1与元素3实际上是在同一层的；与此同时，你可以看到父级元素的高度是元素1和元素3的高度和；

另一张图可能更好理解一点：这张图中元素3实际上是被元素2遮盖了一部分：

3、那么当三个元素都浮动（左浮动）时，父元素的显示：（下图中的棕色部分）

此时，父元素的高度无法被子元素撑开，而父元素中又无其他未产生浮动的子元素，因此父元素如图中显示呈现效果；

清除浮动

清除浮动，涉及到BFC的知识；

那么，什么是bfc呢？
bfc (Block Fromatting Context)：块级格式化上下文，是按照块级盒子布局的；w3c对bfc的定义是：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。这个就是上文解释的那个你哥们上天了，现在归航天部管，你在地面上归地面上的人管；（关于bfc的全部知识请详细查阅相关资料）

那我们要清除浮动，就要破坏bfc的形成条件，也就是改变该块的属性，使他回到地面上，仍然被地面上的规则约束；

最简单有效的清除浮动的方法就是清除浮动（overflow：hidden），即为浮动元素的父元素增加清除浮动的属性 – overflow：hidden；

关于这部分，我看到有位老哥写的炒鸡详细，分享一下，有意可以去仔细学习；https://www.cnblogs.com/smyhvae/p/7297736.html