记录前端学习BFC的学习（第二天）

BFC 块级格式化上下文

1.BFC就是一个独立的渲染区域，只有 Block-level box参与，它规定了内部Block-level Box如何布局，并且这个区域外部毫不相干

2.不是所有的元素模式都能产生BFC，W3C规范：display属性为block，list-item，table的元素，会产生BFC。

3.BFC有着具体的布局特性：有宽，高，有外边距margin，有内边距padding 有边框border。

4.触发BFC的条件 （主要用overflow：hidden触发BFC）

1）-float属性不为none

2）-position为absolute或fixed

3）-display为inline-block，table-cell，table-caption，flex，inline-flex

4）-overflow不为visible

5BFC布局特性：

1）在BFC中，盒子从顶端开始垂直的一个接一个的排列

2）盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻的盒子的margin会发生重叠

3）在BFC中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到右边缘)

4)BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘

5）计算BFC的高度时，自然也会检测浮动的盒子高度

6 BFC的主要用途

1）清除元素内部浮动

2）解决外边距合并

3）制作右侧盒子自适应的问题

自己练习总结部分：

1.清除元素内部浮动的练习实验

①给一个父亲盒子两个子盒子，父亲盒子有高度，子盒子有浮动 ，显示如下：

父亲有高度

②给父亲盒子的高去掉，父亲盒子就会变成一条直线，显示如下：

父亲盒子没高度

③给父亲盒子加上overflow：hidden 触发BFC 显示如下：父亲的高度将是浮动的盒子加一起的和。

父亲盒子触发BFC

2.解决外边距合并 实验及练习

①同一父亲的两个盒子分别加上底外边距还有上外边距 ，外边距发生合并，显示如下：

外边距发生合并

② 给其中一个盒子在加一个空的父盒子，并给父盒子一个overflow：hidden 触发BFC，则两个子盒子不在同一个BFC区域，外边距的合并就没有了。显示如下：

外边距不合并

3. 制作右侧盒子自适应的问题 的实验和练习

①给上面的子盒子加浮动。则两个盒子出现下面的情况：

第一个盒子浮动将不占有位置

②给未加 浮动，即右边的盒子激发BFC，则右边盒子可自适应。

右侧盒子自适应

总结 BFC就是一个独立的大盒子中加的一些属性，根据特性实现部分作用。

结2020-2-13

明天情人节快乐笔芯。

• 点赞
• 收藏
• 分享
• 文章举报

化石姑娘 发布了17 篇原创文章 · 获赞 0 · 访问量 167 私信 关注