什么是BFC
Block Format Context，块级格式化上下文。
通俗的讲，就是一个独立的布局容器，在这个容器中按照一定规则进行排布，并且不会影响其他环境的物品。
创建BFC的条件：
- 根元素：body
- float：非none
- position：absolute、fixed
- display：inline-block、table-cell、table-caption等
- overflow：hidden、auto、scroll
BFC的特点：
- 垂直方向向上，自上而下排列，和文档流的排列方式一致。
- BFC中元素margin会重叠
- BFC的高度包含浮动元素的高度
- 不会与浮动元素重叠
- 内部元素不会影响外部元素
- 每个元素的左margin值和容器的左border相接触
BFC的作用：
- 解决margin重叠问题
- 解决高度塌陷的问题
- 创建两栏自适应布局
margin重叠问题
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。
需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。
重叠只会出现在垂直方向。
计算原则
折叠合并后外边距的计算原则如下：
- 如果两者都是正数，那么就去最大者
- 如果是一正一负，就会正值减去负值的绝对值
- 两个都是负值时，用0减去两个中绝对值大的那个
解决方案
对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠
（1）兄弟之间重叠
- 底部元素变为行内盒子：
display: inline-block（不满足块元素） - 底部元素设置浮动：
float（生成BFC） - 底部元素的position的值为
absolute/fixed（生成BFC）
（2）父子之间重叠
- 父元素加入：
overflow: hidden（生成BFC） - 父元素添加透明边框：
border:1px solid transparent（不满足margin相碰） - 子元素变为行内盒子：
display: inline-block（不满足块元素） - 子元素加入浮动属性或定位（生成BFC）
position定位
正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。
默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
静态定位
static是默认值，表示将元素放入它在的文档布局流中的正常位置。
相对定位
relative，它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
使用top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
绝对定位
absolute,绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在初始块容器中。
这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
固定定位
fixed，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
粘性定位
sticky，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
浮动
float：left、right、none、inline-start、inline-end。
浮动元素是 float 的计算值非 none 的元素。
浮动的工作原理：
- 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
产生问题：
- 父元素高低无法被撑开，影响与父元素同级的元素
- s
- s
清除浮动的影响：
- 给父元素定义height
- 最后一个浮动元素之后添加一个空的div标签，并添加
clear:botn样式 - 给父元素添加
overflow: hidden/auto - 使用
::after伪元素，并设置content:'';display:block;clear:both;，clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平
clear属性的原理： 官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。