BFC(Block formatting context)

使用BFC规则的最外层元素会建立一个独立的块格式上下文。

这意味着:元素块中的每个元素都按照块和内联布局规则按照正常流程进行布局。参与 BFC 的元素使用 CSS 盒模型概述的规则,

BFC是元素的隐含属性,手动开启后的BFC元素建立一个独立与页面的布局.
开启BFC的方法:
不推荐方法(副作用大):
1. 添加float属性即可
2. 将元素设为行内元素
常用方法:
1. 将元素的overflow设置为一个非visible,一般设为hidden来开启BFC以降低副作用
2. 使用clear属性

开启BFC后的特点:

  1. 不会被浮动的元素所覆盖
  2. 子元素和父元素的外边距不会发生冲突(设置了子元素的外边距而父元素也被动设置了)
  3. 开启BFC的元素可以包含浮动的子元素