CSS-标准文档流（Normal Flow）

本文主要是介绍CSS-标准文档流（Normal Flow），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1 定义

文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

2 脱离文档流

文档一旦脱离文档流，则元素不再按照文档流的排列方式进行排列，如块级元素脱离文档流后，该块级元素不再接着上个元素从上到下排列，而是成为第一个元素，从顶部开始排列。

脱离文档流的方法：

float:left
position:absolute;
position:fixed

文档流布局如图2.1：

在这里插入图片描述

图2.1 文档流布局

以上是块级元素按照从上到下的排列方式进行排列，当其使用下列类选择器脱离文档流后，布局如2.2所示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div class = "box"><div class = "children v1">hello</div><div class = "children v2">ni hao</div><div class = "children v3">zai jian</div></div>
</body>
</html>

.box {border: 5px solid red;
}
.children {border: 1px solid green;width: 100px;padding: 10px;margin: 10px;
}
/*.v1,.v2,.v3{float: left;
}
.v1 {position: absolute;
}*/
.v1 {position: fixed;
}

在这里插入图片描述

图2.2 脱离文档流

如图2.2所示，原先第2个块级元素脱离文档流后和第一个块级元素重叠了，其父元素高度不再包含该元素高度

3 相对定位

相对定位relative对父元素的高度无影响

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div class = "box"><div class = "son v1">hello</div><div class = "son v2">hello</div><div class = "son v3">hello</div></div>
</body>
</html>

.box {border: 1px solid red;
}
.son {width: 100px;border: 1px solid green;padding: 5px;margin: 10px;
}
.v1 {position: relative;top: 20px;background: yellow;
}
.v2 {background: blue;
}