CSS 定位 & 文档流

文档流小计

页面CSS布局虽然写了很多，但多为无章法的拼凑，对这方面的知识掌握的不系统，导致遇到问题发虚，最近看JS权威指南时多次遇到文档流，所以在此做一个总结。
欢迎指正！

定位方式

身处Normal flow：块级元素(块级格式)、行内元素(行内格式)、相对定位(relative)
脱离Normal flow：浮动定位(float)、绝对定位(absolute)、固定定位(fixed)

Normal flow

“normal flow”不明白为什么会被翻译成文档流，也有人叫普通流、正常流，本以为是很高深的内容，实际就是语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。

脱离Normal flow

浮动

float：
属性值：left|right|none|inherit
初始值：none
应用元素：所有元素
继承性：无
特点：
- 浮动定位是脱离normal_flow
- 包含块：浮动元素最近的块级祖先。
- 浮动元素会生成一个块级框（行内框）。
- 浮动的元素不会超过父元素框
- 浮动的元素左右不会重叠，会依情况另起一行进行浮动。
- 浮动元素不能比之前所有的浮动元素或者块级元素的顶部更高。
说到float，自然不能落下clear。
clear：
属性值：left|right|both|none|inherit
初始值：none
应用于：块级元素
继承性：无
对于clear的理解开始以为是消除浮动，然而实际是，块级元素通过配置clear属性，选择两边是否可以存在浮动元素，left、right分别是元素左边、右边不允许存在，而both则是两边都不允许浮动元素存在。

absolute

特点：
- 定位时，从文档流中删除，相对于其包含块，其边界根据偏移属性（top，left）放置。
- 绝对定位元素可能覆盖其他元素，或者被其他元素覆盖。
- 绝对定位元素的包含块是最近的position值不为static的祖先元素，通常选择一个元素（其position为relative并且没有偏移）作为绝对定位的包含块。
- 如若为确保body元素为其后代建立一个包含块，而不是让用户代理选择初始包含块，则可以进行如下声明body{position:relative;}

水平居中
元素水平居中：左右外边距设置为auto，left、width、right不是auto，此时左右外边距会设置成相等的值。


<div style="position:relative;width:10em;height:10em; border:1px solid;">
        <div style="position :absolute;right:1em;left:1em;width:5em;height:100%;background:#aff;  margin:0 auto;">水平居中</div>
</div>

水平居中

垂直居中
元素垂直居中：上下外边距设置为auto，top、height、bottom不是auto，此时上下外边距设置成相等的值。

1
2
3

<div style="position:relative;width:10em;height:10em; border:1px solid;">
        <div style="position :absolute;left:0;width:100%;background:#aff; height:5em; bottom :0;top:0;margin:auto 0;">垂直居中</div>
</div>

垂直居中

fixed

固定定位虽然与绝对定位很相似，只不过其包含块是视窗，元素进行固定定位之后，会从文档流中完全去除，不会有相对于文档中任何部分的位置，即定位之后完全保持不动。

文章目录