深入理解BFC

一.什么是FC


🎪FC:FC的全称是Formatiing Context ,元素在标准流里面都是属于一个FC的,我们可以看下官网文档。

那么从官方文档中我们可以看到BFC其实就是块FC,如果是行内就是IFC,其实BFC就可以理解为块级元素的布局,也就是布局的上下文,也就是环境块级元素布局的环境。

那么BFC在哪?拿出来给我看看,MDN整理出的会形成BFC的情况

二.BFC有什么作用哪?


🥴我们先看下官方文档对BFC的描述

  1. 在BFC中,box会在垂直方向上一个挨着一个的排布;
  2. 垂直方向的间距由margin属性决定;
  3. 在同一个BFC中,相邻两个box之间的margin会折叠(collapse);
  4. 在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的;

😭BFC的具体作用常见的有两种:解决margain折叠问题,解决浮动高度塌陷问题。


其实我们日常开发中习以为常的现象背后的操作者就是BFC,可以理解为它是一套布局的规则,比如从左到右排布,为什么margain会折叠,其实这些背后都是BFC在起作用。


三.BFC的作用一:解决折叠问题


😊通过上面的内容我们会了解到,在同一个BFC中两个box之间的margain会折叠。

css 复制代码
.box1 {
  height: 30px;
  background-color: aquamarine;
  margin-bottom: 30px;
}

.box2 {
  height: 50px;
  background-color: blueviolet;
  margin-top: 30px;
}

那么我们解决margain塌陷问题的方法就是让两个元素处于不同的BFC就可任意折叠不同的BFC

css 复制代码
.container{
  overflown:auto;
}
.box1 {
  height: 30px;
  background-color: aquamarine;
  margin-bottom: 30px;
}

.box2 {
  height: 50px;
  background-color: blueviolet;
  margin-top: 30px;
}

😶‍🌫️解决这个问题的方案就是在第一个盒子外部增加一个盒子让这个盒子在一个新的BFC中。

四.BFC解决浮动高度问题


🎯网上有很多说法,BFC可以解决浮动高度塌陷,可以实现清除浮动的效果,但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明,他们也压根没有办法解释,为什么可以解决浮动高度的塌陷问题,但是不能解决绝对定位元素的高度塌陷问题呢?

👽事实上,BFC解决高度塌陷需要满足两个条件:

  1. 浮动元素的父元素触发BFC,形成独立的块级格式化上下文(Block Formatting Context);
  2. 浮动元素的父元素的高度是auto的;

🎪BFC的高度是auto的情况下,是如下方法计算高度的。

  1. 如果只有inline-level,是行高的顶部和底部的距离;
  2. 如果有block-level,是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
  3. 如果有绝对定位元素,将被忽略;
  4. 如果有浮动元素,那么会增加高度以包括这些浮动元素的下边缘。
css 复制代码
.container {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
}

.item {
  width: 60px;
  height: 30px;
  background-color: aquamarine;
  margin-bottom: 30px;
  float: left;
  border: 1px solid #000;
}
html 复制代码
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

使用BFC来解决高度塌陷问题:

css 复制代码
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: antiquewhite;
}

相关推荐
y先森16 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy17 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891120 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端