定位与BFC

BFC

• 形成（4种）

  1. float
  2. absolutely positioned elements：

  positione: absolute, fixed;
  

  3. 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中的元素遵守下列规则

1. 从上到下排列
2. 垂直外边距合并
3. 重叠浮动元素

• BFC之间的规则

1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

• 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
• 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

2. BFC不会重叠浮动元素
3. BFC可以包含浮动

定位机制

• CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

1. 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
2. 浮动定位
3. 绝对定位包括 absolute和 fixed

2和3 元素都会脱离文档的普通流
注意：position:relative 属于普通流，元素位置会发生偏移，但是并不会影响其他元素的布局

绝对定位宽度

• 绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%

布局

• 消除两个按钮之间的空隙
  1. 让标签之间没有空隙
  2. 先display为inline-block，再父元素font-size设置为0，子元素不为0即可
  3. 用浮动，即先用一个块级元素包裹住按钮。然后让两个按钮浮动，清除浮动后再让新添加的块级元素居中

  1和2不要用，只在面试时候回答即可。布局中尽量不用inline-block（除非是inline-block的元素是独一无二的，没有兄弟）

flex

• 这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果