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 的元素可以包含浮动的子元素

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论。
我的空间