前端三件套之css(5) BFC

是孤衾呀

已于 2023-07-05 18:58:05 修改

阅读量944

点赞数

分类专栏：前端可视化系列（持续更新中）文章标签：前端 css css3

于 2023-07-05 18:42:18 首次发布

本文链接：https://blog.csdn.net/qq_62102968/article/details/127440425

版权

9 篇文章 1 订阅

订阅专栏

什么是BFC

BFC全称(Block formatting context) 意为："块级格式化上下文"。

它就像我们学校分班级一样，虽然都是一个学校，但是每个班是独立的，不相干扰的。

<div class="main">
    <div class="left">这是div1</div>
    <div class="right">这是div2</div>
</div>

例如上述的三个div，"main" 有两个子标签 "left" 和 "right" ，BFC的作用就是分别让这两个子标签形成独立的容器，left 的属性不会应用到 right 中。

1：根元素<html> (相当于最外层的网页界面的子元素自动遵守BFC规则排列）

2：浮动（float : left 及 float : right）

3：绝对定位和固定定位（position: absolute及position: fixed）

4：设置行内块元素和弹性布局（display：inline-block，flex）

5：内容隐藏（overflow：hidden）

仔细观察，它们都有一个共同的特性：脱离文档流。换句话说，能脱离文档流就会触发BFC。

虽然BFC会让容器独立，但是布局的规则还是不变的

1：触发BFC规则的标签，他内部的子标签只能在垂直方向一个一个排列，而不能横着排。

2：内部子标签垂直方向的距离由外边距由margin决定，并且两个相邻子标签外边距会重叠，谁的外边距大，就显示多少

3：计算距离时，会优先考虑top,bottom等定位，再考虑外边距

4：触发BCF的容器不会与其他触发BFC的容器重叠，只会相应的排在后面

5：由于继承关系，子容器的上外边距会传递给父元素，这时让父元素触发BFC形成独立容器，那么子元素将不会将上边距传给父元素

6：触发BFC的元素中，若子容器脱离文档流，那么计算高度时，也会计算子容器高度(该规则的体现见css(3) 浮动之解决父容器高度塌陷方法二)

关注

专栏目录