CSS属性、BFC、IFC

定位属性

1.clear 规定哪一侧不允许元素浮动

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧

2.clip 剪裁绝对定位的元素

clip:rect(上top，右right,bottom下，left左)

左和上：裁掉多少写多少

右和下：显示多少写多少

3.display 规定元素应该生成的框的类型

none 此元素不会被显示

block 此元素将显示为块级元素，此元素前后会带有换行符

inline 默认。此元素会被显示为内联元素，元素前后没有换行符

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示

run-in 此元素会根据上下文作为块级元素或内联元素显示

table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符

inline-table 此元素会作为内联表格来显示（类似

BFC(Block formatting context)

直译为”块级格式化上下文”。

BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

4.BFC的区域不会与float box重叠

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

6.计算BFC的高度时，浮动元素也参与计算

BFC触发方式：

1.根元素

2.float属性不为none

3.position为absolute或fixed

4.display为inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible

IFC(Inline Formatting Contexts)

直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

规则：

1.ifc中的元素会在一行中从左到右排列

2.在一行上的所有元素会在该区域形成一个行框

3.行宽的高度为包含框的高度，高度为行框中最高元素的高度

4.浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度

5.行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框

6.行框的元素内遵循text-align和vertical-align