共计 832 个字符,预计需要花费 3 分钟才能阅读完成。
CSS 的 BFC 是什么
BFC(Block Formatting Context)块级格式化上下文
首先格式化上下文是一套 css 规范定义的页面渲染区域,有自身的渲染规则(定位,子元素之间的关系)
那么 BFC 便是格式化上下文中的其中一种,可将拥有 BFC 特性的元素看成一个大容器,里面的子元素布局
不会影响到外面的元素
元素如何拥有 BFC 特性
- 当元素是 html 根元素时便自动拥有 BFC 特性
- 当元素被设置成绝对定位的元素(position: fixed , absolute)
- 当元素设置成除了 float:none 元素之外的浮动元素
- 当元素设置了 overflow 属性,并且值不为 visible
如何应用元素的 BFC 特性
-
解决上下外边距重叠的问题
原因:当我们定义两个块级元素,它们之间的上下边距会重叠
这是由于根元素拥有 BFC 特性,会将两个块级元素的上下外边距进行重叠
解决:若想让它们之间的上下边距不重叠,则要对它们分别拥有 BFC 特性eg. <div style="overflow: hidden"></div> <div style="overflow: hidden"></div> 这样两个元素便会独立开来,不会发生上下外边距的重叠了
-
清除浮动,解决由于浮动带来的父元素高度坍塌的问题
原因:由于父元素没有设置高度,子元素设置成浮动后,会脱离普通文档流,让父元素高度塌陷
解决:由于 BFC 容器可以包含浮动元素,所以可以触发父元素的 BFC 属性eg. <div style="overflow: hidden"> <div style="float:left; height:200px"></div> </div>
-
处理元素被浮动元素覆盖
原因:设置为浮动元素其兄弟元素会被覆盖
解决:将兄弟元素追加 BFC 特性,可以和浮动元素隔离开来,不被其覆盖eg. <div style="overflow: hidden">content</div> <div style="float:left; width:200px; height:200px"></div>
正文完