display/position/float

122 阅读1分钟

display

none/inherit/initial/unset/contents

block/inline/inline-block/run-in

flex/inline-flex

grid/inline-grid/subgrid

table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-column-group/table-column/table-cell/table-caption/

list-item

ruby

flow/flow-root

position

inherit/relative/absolute/fixed/sticky/static

float

left/right/none/inherit

1.浮动后,脱离正常流,在浮动流中排列。任何元素都是作为块元素来显示,可设置宽高,内容撑开宽度。
2.很多浮动块在一起的时候,他们总是找与自己最近的、浮动方向相同的块来确定自己的位置,如果被迫换行,则以这个最近的元素的高度为基准起新行

clear属性: 去掉浮动属性(包括继承来的)
意思和上面对应的一样

需要清浮动的情况:

子标签浮动后,父标签的高度无法被撑开,所以需要清浮动;
新加入的标签,希望不受之前浮动元素的影响,则需要清浮动;

1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 触发layout 常用于清楚内浮动;
3.after 伪对象:给当前对象设置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想办法 触发ie6的layout渲染机制,靠运气解决了很多bug,zoom:1可以触发!!!
inline-block对内块 对外行;
4.父标签一起浮动;
5.position:absolute;清除浮动

参考:

css3 display 详解

css详解position五种属性用法及其含义