浮动与定位、bfc和ifc

CSS的两大特性：

层叠性
继承性： 1、文本样式
        2、字体样式
        3、列表样式
        4、表格样式

浮动与定位

浮动

clear:left;right;both;清除前面所有元素的浮动对这个元素的影响。
前面元素哪边浮动就清除哪边，前面所有元素的浮动都清除时用both。

定位

属性

position：
    static 没有定位（默认）
    absolute；绝对定位
    relative；相对定位
    fixed；固定定位
top： 数值；
right： 数值；
bottom： 数值；
left： 数值；
overflow：（设置当元素的内容溢出其区域时发生的事情。）
    visible；不裁剪
    hidden；裁剪
    scroll；裁剪并显示滚动条
    auto；若内容被裁剪则主动添加滚动条
    inherit；
clip：设置元素的形状。只针对于一个绝对定义元素
    唯一合法的形状值是：rect (top, right, bottom, left) 
vertical-align： 元素的垂直对齐方式。
z-index：元素的堆叠顺序
    auto； 堆叠顺序与父元素相等。（默认） 
    number； 设置元素的堆叠顺序。 （数值越大越靠前）

静态定位

static 没有定位，元素出现在正常流中（默认）

绝对定位

子元素绝对定位时，它是按第一个绝对定位的父元素定位；
绝对定位不考虑默认的“margin”值。
position: absolute;
top: 数值；
left: 数值；

相对定位

元素相对元素原来（在正常流中）的定位
position: relative;
top: 数值；
left: 数值；

固定定位

相对body定位。
position: fixed;
top: 数值；
left: 数值；

各种定位的原位置

相对定位——原来的位置被保留；
绝对定位、固定定位——原位置被清空；
当页面内容多右侧出现滚动条时，固定定位的元素不会随滚动条滚动。

隐藏

display： none; ——原有位置被清空
visivility: hidden; ——原有位置被保留

bfc块级格式化上下文

——block formatting context【块级格式化上下文（环境）】
bfc中的布局原则：
1、在bfc环境中所有元素在垂直方向上一个接一个的放置；
2、相邻盒子(box)在垂直方向上的margin值会重叠；
3、内部盒子会与bfc的左边(右边)线接触，浮动也是这样；
4、bfc区域不会与浮动盒子重叠；
5、bfc环境中子元素与外界分离，不会影响到外面的元素，而外面的元素也不会影响到bfc里面的元素；
6、bfc中浮动元素会参与计算。
——触发bfc——overflow： hidden；

bfc的触发方式：
float： 值不为none时；
position： absolute； fixed；
display： inline-block；table-cell；table-caption；flex；inline-flex；
overflow： 不为visible时；

ifc行级格式化上下文

——inline formatting context【行级格式化上下文（环境）】
1、ifc中的元素会在一行上从左到右排列；
2、在一行上的所有元素会在该区域形成一个行框；
3、行框的宽度为包含框的宽度，高度为行框中最高的元素的高度；
4、浮动的元素不会再行框中，并且浮动会压缩行框宽度；
5、行框的宽度容纳不下子元素时，子元素会换到下一行显示。并会产生新的行框。
6、行框内的元素遵循text-align和vertical-align。

ifc的触发方式：
1、插入空的行级元素

2、在父元素上插入空白行内为元素
1）父级：after（/before）{
         content: "";
         font-size: 0px;
         display: inline-block;
         width: 0px;
         height: 100%;
         vertical-align: middle;
2）给所有需要居中的元素添加： vertical-align: middle;