css基础-浮动

css有三种定位模式：常规流，浮动和绝对定。除了浮动元素和绝对定位元素以及根元素以外的元素都在常规流中（in flow）。

在常规流中的盒子，属于块级格式化上下文或行级格式化上下文，会遵循一定的规则摆放。

Fomatting Context也就是格式化上下文可以理解成盒子在常规流中遵从的摆放规则。

BFC(Block Formatting Context)是一个面试常见的考察点，即块级格式化上下文。属于块级上下文的盒子遵从以下的规则布局：

• 盒子在容器内（containing block）中是从上倒下一个一个垂直摆放的；
• 两个兄弟盒子之间的垂直距离由margin决定；
• 同一个BFC内的垂直距离会合并；
• 盒子的左边元挨着包含块的左边；

下面重点看一下浮动
浮动元素就如它的名字一样，会脱离常规流漂浮在包含块的左边（）或者右边，漂浮到包含块的边缘或者是挨着其他的包含块，就好比，一艘船要靠岸，岸边已经停了船，那么只能排队停在旁边了，当一排摆不下的时候还会被挤到下一排。
此外，浮动元素对其后面流内的块级和行级元素的影响不同，对块级元素没影响，但是行级元素会变短以避开浮动元素，好比word里面的图片环绕模式。
清除浮动使用clear属性（left｜right｜both），表示元素的哪一边不能与之前的浮动框相邻,但要注意的是这时候块级元素不再是当浮动元素不存在了，而是避开浮动元素移动到了浮动元素的后面。

清除浮动可以使用generate content来做：
定义一个class名字叫做clearfix，加在浮动元素的父级元素上

.clearfix::after{
     content:'  ';
     clear:both;
     display:block;
     height:0;
     overflow:hidden;
}

当然也可以使用before加在不想被浮动元素影响的元素上。

触发BFC也可以用来清除浮动，而且可以轻松的实现两栏布局

这是因为BFC规定：

1. BFC内的浮动元素不影响BFC外的元素；
2. 高度包含其内部浮动元素的高度；
3. BFC不会和浮动元素重叠；
4. 可以利用overflow：hidden来触发（overflow非visible）；
5. 浮动，绝对定位和inline-block都会触发BFC；

BFC的作用：

1. 清除浮动；
2. 防止margin折叠
3. 两栏布局