css布局

流式布局

display: inline | block | inline-block

block独占一行默认宽度会填满父的宽度，可设width,height,padding,margin. block可以包含block,inline,inline只能包含inline,也有例外。

inline同行显示直到宽度排满，宽度随元素内容显示，width,height无效，水平方向padding-left, padding-right, margin-left, margin-right有效，垂直方向padding-top, padding-bottom, margin-top, margin-bottom无效

inline-block同行显示，内容可以设置宽高

float: left | right | none | inherit(继承父的float属性)

浮动，脱离文档流，如果前一个元素是文档流中的元素，则浮动元素的顶部和前一个元素的底部对其，如果前一个元素也是浮动元素，则跟在前一个元素同行后面，如果宽度不够则挤在下面。

clear : none | left | right | both

清除浮动，添加后左侧或右侧或两边不允许浮动存在，如果左侧是浮动元素则换行不在同行显示，只影响添加clear的元素，不影响其他元素。

position: static | relative | absolute | fixed | auto

配合left top 使用

static 默认(相当于不设position) 不能用z-index

relative 相对于元素在流中的位置偏移，任然在流中，其他元素按照它偏移前的位置对待，可用z-index

absolute 相对于最近的已定位的(relative,absolute)祖先偏移，如果没有已定位的祖先则相对于浏览器窗口，脱离流，它后边的元素会补上它在流中的空缺，可用z-index

fixed 相对于浏览器窗口偏移，可用z-index

overflow　　//visible,hidden,scroll,auto       overflow-x,overflow-y

BFC(Block fomatting context)

生成条件：

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

作用：

1. BFC不与float元素重叠

2. BFC的高度会考虑float元素

3. 同一个BFC相邻margin重叠

!important

white-space:nowrap