浮动、定位以及bfc、ifc

一、浮动
1.块级元素未浮动不允许占行，浮动以后可以占行，上面的块级元素让位给下面的块级元素。
2.两个块级元素向同一个方向浮动，结果是两个块级元素浮动到了一起，若增加块级元素的宽度，本行不足以放下，就会自动换行。
3.多个块级元素同时浮动时，排列时除了往设置的那个方向靠之外，还会尽量向上靠。
4.clear可以清楚上面的块级元素浮动对下面的块级元素的影响。即，本来应该占领浮动后的区域，但是又有了清除命令，于是不能占领了。
二、定位
1.绝对定位：absolute
     1. 当父元素绝对定位以后，子元素是按父元素来定位的，当父元素没有定位时，子元素是按body定位的。
     2. 绝对定位没有考虑默认的margin和padding值，在设置top和left值之前，必须设置position：值u；
2.相对定位：relative
     1. 相对最初的位置的移动
     2. 其他类似于绝对定位
####3.固定定位：position：fixed
     1. 子元素相对于窗口定位，不管父级元素有没有定位。
     2. overflow：设置当元素的内容溢出其区域时发生的事情。
     3. vertical-align：垂直对齐
     4. z-index：设置元素的堆叠顺序。（值越大越会在上层显示）
4.定位的特性
     1. 相对定位以后，元素原来的位置会被保留。
     2. 绝对定位和固定定位以后，元素原来的位置会被清空
     3. display：设置是否及如何显示元素。
        1）block：块级；
        2）inline：内嵌
        3）none，不显示，占得位置被清除
        4）visibility：hidden，占得位置没有被清除
     4. 子元素绝对定位以离它最近的那个已经被定位的盒子为基础定位，若没有，就以body定位
     5. overflow：hidden：解绑（子对父）
三、bfc
1.bfc：block formateing context:块级格式化上下文（环境）
2.布局规则
    1）bfc内部所有盒子都会按照垂直方向排列（默认方式）。
    2）相邻盒子在垂直方向上的margin值会重叠。
    3）内部盒子会以bfc的左边线接触，浮动也一样。
    4) bfc区域不会与浮动盒子重叠。
    5）bfc环境中的子元素与外界分离，不会影响到外面的元素，而外面的元素也不会影响到bfc里面的元素。
    6）bfc中浮动元素会参与计算。必须是块级的。
3.bfc的触发方式：
    1）float不为none时，都会触发；
    2）position：abusolute、fixed
    3）display：inline-block，table-cell、table-caption，flex，inlline-flex
    4）overflow：不为visible。
四、ifc
1.ifc：inline formateing content：行级格式化上下文（环境）
2.布局规则：
    1）ifc中的元素会在一行上从左到右排列，不能有块级
    2）在一行上的所有元素会在该区域形成一个行框
    3）行框的宽度为包含框的宽度，高度为行框中最高元素的高度
    4）浮动元素不会再行框中，并且浮动元素会压缩行框的宽度
    5）行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框
    6）行框内的元素遵循text-align和vertical-align