一、css中常规的定位方案
1.普通流
- 元素按照其在 HTML 中的先后位置至上而下布局
- 行内水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行
- 所有元素默认都是普通流定位
2.浮动
元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移
3.绝对定位
二、常规布局下的问题（不是bug）
1.外边距重叠
2.浮动的元素可以使父盒子高度塌陷
3.浮动元素 覆盖其他元素
4.父子盒子嵌套外盒子塌陷
三、BFC讲解
1.概念：
BFC（Block_formatting_context）块级格式化上下文
2.解释
BFC是一个独立的区域，有自己的渲染规则。使用了BFC相当于加了容器隔离，使BFC内部的元素与外部元素在布局上互不影响
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
3.特性
1.每个BFC区域只包含其子盒子，不包含其孙子盒子
2.每个BFC区域相互独立，互不影响
4.渲染规则
BFC的区域不会与float的元素区域重叠- 计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然- BFC的区域 会计算子盒子到父盒子margin-top的距离
5.BFC的作用（解决问题）
1.外边距重叠
2.浮动的元素可以使父盒子高度塌陷
3.浮动元素 覆盖其他元素
4.父子盒子嵌套外盒子塌陷
6.如何让一个常规盒子变成BFC盒子
只要元素满足下面任一条件即可触发 BFC 特性：
- html 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex、flow-root
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
常用：overflow:hidden,display: flow-root因为他没有副作用
四、实操
1.使用BFC解决 外边距重叠
2.使用BFC解决 浮动的元素可以使父盒子高度塌陷
3.使用BFC解决 浮动元素 覆盖其他元素
4.使用BFC解决 父子盒子嵌套外盒子塌陷
五、总结
BFC是块级格式化上下文，可以形成一个独立的渲染区域。让BFC内部的盒子和外部的盒子实现隔离。它有自己的渲染规则，
BFC的区域不会与float的元素区域重叠- 计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然- BFC的区域 会计算子盒子到父盒子margin-top的距离
可以利用这些规则去解决这些问题：
1.外边距重叠
2.浮动的元素可以使父盒子高度塌陷
3.浮动元素 覆盖其他元素
4.父子盒子嵌套外盒子塌陷
如果想使用BFC的话，可以给盒子设置以下任意属性，让普通盒子变成BFC盒子
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex、flow-root
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
常用：overflow:hidden,display: flow-root因为他没有副作用
原文链接：https://juejin.cn/post/7323271604649426953 作者：RisingSun
