display 属性依赖于称为相对定位（ relative positioning ）的概念，它意味着元素将相对于页面上的其它元素进行定位。 CSS 还支持绝对定位（ absolute positioning
），它允许独立于其它元素把一个元素放在页面上的精确位置。
display 用来定义元素的显示类型。其中，第二行为列表项目或是表格类项目，在网页设计中不常用:
- display ： none | inline | block | inline-block
- display ： list-item | table | inline-table | table-caption | table-cell | table-row | table-row-group |
table-column-group | table-column | table-footer-group| table-header-group
- display ： run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
第三行为 css 3 新增属性。
- inline 行内元素
- block 块级元素
- inline-block 行内块
父元素 {font-size:0;} 。
由于 img 元素也是 inline-block 元素，因此我们也能使用" font-size:0 "来去除图片之间的间距。
none 隐藏
display:none 的元素被隐藏之后，不占据原来的位置。也就是说彻底地消失了，看不见也摸不着visibility:hidden 的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着- table 表
- table-caption 表头
- table-row 表行
- table-cell 表格
- 图片垂直居中于元素
- 等高布局
- 自动平均划分元素，并且在一行显示
将 CSS 属性 display 定义为 run-in 后，会根据周围元素来决定盒子类型，它有以下三个特点。
- 如果定义为 run-in 的元素包含一个块级元素，那么它也可被理解为块级元素
- 定义为 run-in 的元素的相邻兄弟元素（位于元素后面的兄弟元素）如果是块级元素，那么这个兄弟元素会变成行内元素
- 如果是其它情况，那么 run-in 元素可理解为块级元素
块元素具有如下特点
- 独占一行，排斥其它元素跟其位于同一行，包括块元素和行内元素
- 块元素内部可以容纳其它块元素或行元素
- 可以定义高度（ height ），也可以定义宽度（ width ）
- 可以定义四个方向的 margin 属性
行内元素具有如下特点
- 可以与其它行内元素位于同一行
- 行内内部可以容纳其它行内元素，但不可以容纳块元素，不然会出现无法预知的效果
- 无法定义高度（ height ），也无法定义宽度（ width
- 可以定义 margin-left 和 margin-right ，无法定义 margin-top 和 margin-bottom
float ： none | left | right
浮动空间
- 元素定义了宽高，则以设置的值显示
- 包含其它对象，则紧紧包裹对象或内容区
如果未设置且不包含，则缩为一个点
浮动位置
- left
right
浮动环绕
- 父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。
- 页面布局错乱
常见的清除浮动的方法有三种。
- clear:both
- overflow:hidden
- ::after 伪元素 使用" ::after 伪元素"结合" clear:both "来实现
clear ： none | left | right | both
清除不是清除别的元素浮动，而是清除自己。如果左右两侧存在浮动元素，则把当前元素清除到下一行显示，而不是将前面的浮动元素清走，或者上一行显示。根据 HTML 解析规则，当前元素前面的对象不会受后面的影响