定义
文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
脱离文档流
- 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。
- 脱离文档流的方法：
-
float:left;2.position: absolute;3.position:fixed
1.png
.v1 { position: fixed;}
3.png
可以看到对.v1进行
fixed定位后，其父元素的高度便与他无关。具体代码示例：
相对定位relative对文档流的影响
4.png
.v1 {
position: relative;
top: 20px;
background: yellow;
}
.v2 {
background: blue;
}
5.png
- 总结1： 通过开发者工具可知，两次的
.box的高度是一样的，所以对元素进行相对定位不会影响其父元素的高度。 - 总结2： 对元素进行相对定位，其在父元素的真实空间位置还是原来的位置，只是肉眼看到的是新位置相对于原来的位置进行移动，所占据的真实空间是不变的。
具体代码示例：
div高度的确定
-
div里面只有一行内联元素，其高度 = 这一行内联元素的行高
6.png
7.png
总结：font-size:20px可是div的高度为26px，当字体改变时font-family:yahoma时，div的高度又是另外一个值，说明div的高度由字的大小x开发者建议的行高确定，与font-size无关。 - 具体写入
line-height的值,没有padding等。
.box2 {
margin: 10px;
line-height: 30px;
border: 1px solid green; /*border其实是占据空间的，上下共占据2px。*/
}
9.png
总结：div的高度即为
line-height的值 。（在没有padding的前提下）
- div里面还有div，div的高度
.box3 {
border: 1px solid blue;
padding: 10px;
}
.v1 {
border: 1px solid yellow;
margin: 20px;
padding: 20px;
}
10.png
总结：div的高度由其自身的
padding+子元素的高度+子元素的margin、padding。
- div里面有块级元素和内联元素，div的高度
总结：div的高度由它内部文档流中元素的总和决定。决定！=相等，还存在行高、padding、margin等等。
具体代码示例：
div的宽度确定
div的宽度不是由div里面的文字决定的，div默认是一行宽。
内联元素的宽高
内联元素的宽度由其内容+margin+padding决定，但是其高度是不受padding和margin影响的。
11.png
