BFC和IFC

我们先看一些基本概念。
1.元素框
CSS假设所有元素都会生成一个或多个BOX，称为元素框。元素框中心有内容区，内容区外周围包括padding、border、margin。
2.包含块
一个盒相对于它的包含块的边界来渲染。通常盒为它的后代元素建立包含块。注意盒并不受它的包含块的限制，当它的布局跑到包含块的外面时称为溢出(overflow)。包括块是元素的布局上下文。
3.盒模型
CSS框模型规定了元素框处理元素内容、内边距、边框、外边距的方式。常见的框模型有两种：块级盒子Block Box和行级盒子Line Box。
4.BFC
每个元素或者说每个Box会根据设置的display值，去选择渲染它的方式，不同的display有不同层级：block-level box块级、inline-level box行级、run-in box插入型。不同的层级有不同的渲染规则，比如BFC和IFC。
BFC是块级格式化上下文，规定了块级盒子的渲染布局方式。
4.1.BFC的特点
a).内部盒子会在垂直方向排列
b).同一个BFC中的元素可能会发生margin collapse；
c).BFC就是页面上的一个隔离的独立容器，里外互相不影响
d).计算BFC的高度时，考虑BFC所包含的所有子元素，连浮动元素也参与计算；
e).当元素不是BFC的子元素的时候，浮动元素高度不参与BFC计算（既是常见的盒子塌陷问题）
生成BFC的环境，则其不会被任何所破坏，就是一个整体
比如inline的文字，不能被破坏，是一个整体，那么文字环绕布局是怎么做的呢？
4.2.如何产生BFC
a).根元素
b).float属性不为none
c).position为absolute或fixed
d).display为inline-block, table-cell, table-caption, flex, inline-flex
e).overflow不为visible
5.Block Box
display:block、list-item 以及 table
在正常流中，块级元素框的水平部分 = 其父元素的width
是此元素的margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
5.1.负margin
两种情况:水平和垂直方向
5.1.1.水平方向
a).width不固定
因为以上7个值相加要等于父元素width，所以使用负margin会造成width增加
b).width固定
margin-right增大.
5.1.2.垂直方向
a).margin-bottom为负值
不会造成元素本身的移动，而是造成兄弟元素往上移动
b).margin-top为负值
元素本身及后续元素向上移动
5.2.负margin与float应用，双飞翼
6.Line Box
每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。