-
BFC
-
形成（4种）
- float
- absolutely positioned elements：
positione: absolute, fixed;- block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes,
display: inline-blocks, table-cells, table-captions;4.block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
overflow: auto, hidden, scroll 同一个BFC中的元素遵守下列规则
- 从上到下排列
- 垂直外边距合并
- 重叠浮动元素
- BFC之间的规则
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
- BFC不会重叠浮动元素
- BFC可以包含浮动
-
-
定位机制
- CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
- 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
- 浮动定位
- 绝对定位包括 absolute和 fixed
2和3 元素都会脱离文档的普通流
注意：position:relative 属于普通流，元素位置会发生偏移，但是并不会影响其他元素的布局 -
绝对定位宽度
- 绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%
- transform: translate, scale
-
布局
- 消除两个按钮之间的空隙
- 让标签之间没有空隙
- 先display为inline-block，再父元素font-size设置为0，子元素不为0即可
- 用浮动，即先用一个块级元素包裹住按钮。然后让两个按钮浮动，清除浮动后再让新添加的块级元素居中
1和2不要用，只在面试时候回答即可。布局中尽量不用inline-block（除非是inline-block的元素是独一无二的，没有兄弟）
- 消除两个按钮之间的空隙
-
flex
- 这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果
