脱离文档流
定义
文档流中:内联元素默认从左到右流,遇到阻碍或者宽度不够自动换行,继续按照从左到右的方式布局。块级元素单独占据一行,并按照从上到下的方式布局。
脱离文档流
- 文档一旦脱离文档流,在算其父元素的高度时,就不包括其自身了。
- 脱离文档流的方法:
1
.float:left;2.
position: absolute;3.
position:fixed
1.float
使用float可以脱离文档流。
使用float脱离文档流时,其他盒子会无视这个元素,该元素会浮动于其他文档流之上。
注意!!!:其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
background-color:blue;
}
</style>
</head>
<body>
<div class="first">123</div>
<div class="second">456</div>
</body>
结果:
[外链图片转存失败(img-MyISOYbD-1567516621971)(/Users/ocean/Library/Application Support/typora-user-images/image-20190902194622006.png)]
2.position: absolute;
绝对定位(相对于父级的定位)
使用absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,并且这个父类元素的position必须是非static定位的(static是默认定位方式)。