float和BFC

一、float浮动

1.浮动特点

        给元素添加float属性，元素浮动后会脱离正常的文档流，不再占据原来的位置，子元素会保持原来在父级的显示方式，但是会跟随父级浮动到对应位置，（父级的浮动不能被继承）。

2.清除浮动

a.给父元素设置overflow:hidden（触发bfc）；

b.在盒子内添加一个块 属性设置为clear：both;

c.父元素盒子添加 display：flex;

d.父元素盒子设置高度（不推荐）

二、Block Formatting Contexts (BFC 块级格式化上下文)

BFC理解为一个封闭的箱子，箱子内部的元素任何操作，都不会影响到外部元素。

触发BFC四种方式：

• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性:同一个 BFC 下外边距会发生折叠,如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。