position flex脱离文档流 使用after_前端学习随笔7 文档流与浮动

注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

一 心得体会

今天的任务是掌握float(浮动)的应用，创建出三种不同布局的简历。再次学习的过程中，我发现了一些以前忽视甚至弄错的知识点，比如说使用float其实不能将该元素完全脱离文档流，其只是改变了文档流，在文档流中还能占据相应的位置；而使用absolute和fixed的元素则是完全脱离了文档流，不在文档流中占据任何位置。

二 相关知识点

1 文档流

文档流英文是normal flow，直译应该是普通流，在我的理解中应该是这样的：正常情况下，文档中的元素按照从上到下，从左到右的顺序依次显示。其布局规则有如下几点：

1. 块级元素(block)独占一行，宽度为父元素100%；高度为内容高度
2. 行内元素(inline)与其他行内元素保持在同一行，不会开始新行，设置宽高无效
3. 行内块元素(inline-block)在外部视为行内元素，不单独占一行；在内部属于块元素，可以设置宽高
4. padding、border也会占用相应的空间
5. 两个相邻的元素都有设置margin，这两个margin占用的空间是两个margin的较大值
6. 父子元素均有设置margin时，其子元素的左右margin属于父元素的content，而上下margin不属于父元素的content，占位规则是相互重叠，占用空间取其较大值

改变默认文档流有哪些方法呢？

1. position属性值为absolute或者fixed
2. 使用float属性

2 absolute/fixed

以下面代码为例

第一个测试块

第二个测试块

第三个测试块

/* css代码 */body{ margin: 50px; font-size: 50px;}.test1,.test2,.test3{ margin: 20px; border: 1px solid #000;}.test1 { height: 100px; background: yellowgreen;}.test2{ height: 200px; position: fixed; background: skyblue;}.test3 { height: 150px; position: absolute; background: silver;}

显示效果如下图

当div.test1位于div.test2和div.test3中间时，显示效果如下图

当div.test1位于最后时，显示效果如下图

由上我们可以知道，当position属性值为absolute或者fixed时：

1. 该元素完全脱离文档流，不占用的任何位置
2. absolute元素和fixed元素重叠时采用后来居上原则
3. 其默认位置与元素前文档流有关，以走完元素前文档流的位置为默认位置

3 float(浮动)

首先我们来看一看float属性及相关属性值

float: left | right | none(默认)

从定义来看很简单，就是左/右排布；当值为none时，回归normal flow。

值得注意的时当float属性值为非none时，其在某些情形下会更改当前元素的display值，具体如下：

float最大的问题就是元素使用float之后占位不明确，导致其父元素高度塌陷，影响后续文档流。解决办法就是清除浮动(关闭浮动)，在这里给一个比较常用的清除浮动的方法

/*在父元素添加伪类*/div:after { content: ""; display: block; clear: both;}

注：更多关于float的细节可以参考张鑫旭老师的《CSS float浮动的深入研究、详解及拓展》。