一、定位方案基本概念
在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:
- 普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
- 浮动 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
- 绝对定位 (absolute positioning)
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
PS：浮动和绝对定位都脱离了普通流，但是浮动并未完全脱离 普通流，绝对定位完全脱离普通流。
- 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
- 使用绝对定位脱离文档流时，不仅是旁边的其他盒子无视这个元素，连盒子里的文本也无视了无视这个元素。
二、BFC基本概念
1、什么是BFC?
BFC（块级格式化上下文）就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，它属于上述定位方案的普通流。
2、BFC的触发条件:
- 根元素（
<html>） - float值非none
- overflow值非visible
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- position值为absolute、fixed
3、BFC的特点：
- 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
- 计算BFC高度时浮动元素也参于计算（重点）
- BFC的区域不会与浮动容器发生重叠（重点）
- BFC内的容器在垂直方向依次排列
- 元素的margin-left与其包含块的border-left相接触
三、BFC的实际应用
3.1、解决父子盒子外边距塌陷问题
在不了解bfc之前，我用的是padding、border去解决边距塌陷问题
3.2、解决浮动高度坍塌的问题
在不了解bfc前，我通常用伪类，加一个隐藏标签，给父元素设置固定宽度来清楚浮动问题
3.3、解决浮动占位问题
2848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
