块级格式化上下文
- 上下文定义：
①一个参与多方构建，遵循一定规则，独立的环境；
②子项可能创建新的独立环境，与外层的环境有同样的规则，可是却会和外层隔绝。
橙色的球里面有4个球，然后第4个球里面还包含了2个球，是独立的，与外层是隔离的。
- 块级格式化上下文定义：
①Block Formatting Context简称BFC
②块级元素参与构建的、遵循一定规则的独立环境
-
BFC形成条件
- 根元素<html>
- float属性不为none;
- position为absolute、fixed、sticky
- display为inline-block、table-cell
- display: flow-root或者flow-root list-item
- overflow为hidden、scroll、auto
推荐使用display: flow-root，没有副作用，但是兼容性很差。
-
BFC特性
- 内部的块级盒子会在垂直方向，一个接一个的放置。
- 两个盒子垂直方向的间距由
margin决定，属于同一个BFC的两个相邻盒子的外边距会发生折叠。 - BFC的区域不会与浮动盒重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也不会影响到子元素。
- 计算BFC的高度，浮动元素也参与计算。
-
BFC应用
①清除浮动，但是可能会有副作用，推荐还是使用伪元素clearfix的方式。-
浮动引起父容器高度塌陷
由于子元素都是浮动，受浮动影响，父元素的高度塌陷无法包裹子元素
-
解决方案：为父元素wrap加上
overflow: hidden；使其形成BFC，根据BFC特性第5条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。
为父元素添加overflow: hidden，清除浮动
-
②阻止元素被浮动元素覆盖，可以实现两栏自适应布局。
-
右侧的元素被浮动元素覆盖
文字跑到左边的浮动元素下方了
-
解决方法：
为main设置overflow: hidden/auto触发main元素的BFC，根据BFC特性，BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两栏自适应布局。
自适应两栏布局
③防止垂直margin合并
margin合并
可以看到，明明.top和.bottom中间加起来有200px的margin值，但是我们只能看到100px，那是因为他们的外边距相遇发生了合并。
解决方案：
为其中一个元素包裹一层元素，并未这个外层元素设置overflow: hidden;使其形成BFC。因为BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。
给一个元素外层加div
网友评论