Table of contents
Features of out-of-document flow:
The floating element will not cover the text, and the text will automatically wrap around the floating element, so we can use floating to set the effect of text wrapping around the picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 20px;
height: 20px;
background-color: aquamarine;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<p>
fdsafsdafdasddfsafasdhfuidshaufiudsahfuhdasfjadsfgbdasjhgfbdajshfbgdshjf
sjhfhjhsdajkfbgjkdisbfjhabsdhjfhjavsdjbfjabdsjikfbhjdasbfhj bajksdb
fgasdhjkbfdasghfbjksahfjksabduivchcsadjbfjkdsafjkbadjksbfnsadf
sdjgfhdsbachbdisuabcjkdsabnfuibdjkgnfajsdkbvhjbasdbvjkdsabnvjkdsav
jvkgadsyubvjkadsnviuabvkjndoiBVHndiovhubsduihvudsbnvhsadubvjsadv
jsjdkvbhbsdjvihcxjbvjdhasuvjbksjdkxhvubsduvuixbzvobnduasbvoabdv
najksdbvbasdjhvubxcovhbhbadsiohbvsdhbvkjlbcxjzbvkljbndefuohvlkdzxcdv
djfkgvbhjkbvoohzxcbhjvbjklzcxbnvjhzbcxkvbzjkxcxbvjkzcnxvklzxcv
adfjvjkgkzxjhbcvjkbhdjfbvkfljfvadbjhknzolbnvjcnxzvohdioznjkxcnv
</p>
</body>
</html>
Features of out-of-document flow:
block element:
1. Block elements no longer occupy a single line of the page
2. After leaving the document flow, the width and height of the block element are expanded by the content area by default
Inline elements:
Inline elements will become block elements after leaving the document flow, with the same characteristics as block elements (that is, they will not occupy a single line, and the width and height will be expanded by the content area)
So after breaking away from the document flow, there is no need to distinguish between blocks and inlines