out of document flow
Out of document flow means that the element is out of the document. No longer occupies the space allocated by default, the elements below it will go up to fill the space.
It can be understood that the element out of the document flow has left its seat, and the students behind can sit in front and sit in its position.
But in general, there are two types of deviating from the document flow
Fully detached from the document
Half detached from the document
code demo
semi out of document flow
Half out of the document flow, when encountering text and pictures, the supplementary elements will get stuck, forming a wrapping effect
css
.box1{
width: 200px;
height: 200px;
float: left;
background-color: #00B5EE;
}
.box2{
width: 200px;
height: 200px;
background-color: #00FF00;
}html
<div class="box1"></div>
<!-- 我们写点文字 -->
<div class="box2">麒麟二哥</div>Effect
Text stuck, validation half out of document flow
Let's set the width of the green block again and write a few more lines of text
css
.box1{
width: 200px;
height: 200px;
float: left;
background-color: #00B5EE;
}
.box2{
/*宽度设置大一点，比200多50 实现全环绕效果*/
width: 250px;
height: 250px;
background-color: #00FF00;
}html
<div class="box1"></div>
<!-- 我们多写点文字 -->
<div class="box2">
麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥麒麟二哥
</div>Effect
Completely out of document flow
Completely separate from the document flow, ignore text and pictures, and fill elements will not be stuck
css
.box1{
width: 200px;
height: 200px;
position: absolute;
background-color: #00B5EE;
}
.box2{
width: 200px;
height: 200px;
background-color: #00FF00;
}html
<div class="box1"></div>
<!-- 我们写点文字 -->
<div class="box2">
麒麟二哥
</div>Effect
The blue block is out of the document flow, and the green block is filled up, so the green is almost under the blue block. And
we observed that the text we set is useless. When the green box is filled, it will not get stuck—
———————————————
Copyright statement: This article is an original article of CSDN blogger "Big Front-end Engineer", following the CC 4.0 BY-SA copyright agreement, please attach the original source link and this article for reprinting statement.
Original link: https://blog.csdn.net/chengqige/article/details/118929344