After the element is out of the document flow, the equivalent of the farmer uncle was confiscated land, but still have the hukou, is still the country's citizens, the elements out of the document flow is still in the DOM tree structure. The space it occupies is used by other elements, and both overlaps are possible.
Come in from the know, in case the source file is deleted.
Copyright belongs to the author.
Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Zhang Qiuyi
Link:https://www.zhihu.com/question/24529373/answer/29135021
Source: Know
The HTML code for the document below is as follows:
<body><divId="Outofnormal">out of Normal:lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, Veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam?</div><p>lorem ipsum dolor sit amet, consectetur Adipisicing elit. Nostrum praesentium nam Tempora beatae quis nobis laboriosam alias Aliquid, Tenetur exercitationem. Odio, Aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id! </p><p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at Unde aliquid officia illo, tempore vitae et incidunt non, UT eos nesciu NT Quaerat. Enim, minus. </p></body>
CSS code below, in order to see more clearly, add a padding
#outofnormal {width: 200px;background-color: cyan;padding: 10px;}
First of all, normally (that is, in normal flow).
The div to be played:
&lt;img data-rawheight= "417" data-rawwidth= "351" src= "https://pic1.zhimg.com/ E3a50101163ad20ea2c85e15b6470460_b.jpg "class=" Content_image "width=" 351 "&gt; followed by H2: Follow the H2 in the back:
&lt;img data-rawheight= "639" data-rawwidth= "436" src= "https://pic3.zhimg.com/ Cebf598edd0178129247fe950d717bda_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 436 "data-original=" https:// Pic3.zhimg.com/cebf598edd0178129247fe950d717bda_r.jpg "&gt; can see the two are arranged vertically, padding each other. 3D view that's the way it is, everybody row and seat: You can see that the two are arranged vertically, and the padding are on top of each other. 3D view that's the way it is, everybody row and seat:
&lt;img data-rawheight= "422" data-rawwidth= "471" src= "https://pic2.zhimg.com/ 3ab078cb1fef1a23b01c718e84bda53d_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 471 "data-original=" https:// Pic2.zhimg.com/3ab078cb1fef1a23b01c718e84bda53d_r.jpg "&gt;
Second case:
With Float:left, the Blue Div goes out of the document stream and becomes:
&lt;img data-rawheight= "615" data-rawwidth= "526" src= "https://pic1.zhimg.com/ Df64a9482e0c0e155244f3be461a7968_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 526 "data-original=" https:// Pic1.zhimg.com/df64a9482e0c0e155244f3be461a7968_r.jpg "&gt; because the blue Div is out of the document stream, followed by the H2 and P's Because the Blue Div is out of the flow of the document, following the H2 and P's
Boxare positioned as if they didn't see the div, so they all have borders on the left and top of the browser. But interestingly, the H2 and P
text(content flow) saw the float's Div, pushed right in its own box, and floated to the side of the blue Div. This is the property of float, other boxes cannot see the elements of float, but the text in the other boxes can be seen.
&lt;img data-rawheight= "627" data-rawwidth= "728" src= "https://pic3.zhimg.com/ Fe0ec0f33a4ac526ad32ab35d275edba_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 728 "data-original=" https:// Pic3.zhimg.com/fe0ec0f33a4ac526ad32ab35d275edba_r.jpg "&gt;3d view, that's it. I plug in ~ This is the case with 3D view. I plug in ~
&lt;img data-rawheight= "463" data-rawwidth= "890" src= "https://pic4.zhimg.com/ 9021d1a199b2cc8395b5c280846c4ae3_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 890 "data-original=" https:// Pic4.zhimg.com/9021d1a199b2cc8395b5c280846c4ae3_r.jpg "&gt; I plug in ~ I plug in ~
&lt;img data-rawheight= "383" data-rawwidth= "758" src= "https://pic3.zhimg.com/ 9ffeb88b3d163caa06ff265c46822bce_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 758 "data-original=" https:// Pic3.zhimg.com/9ffeb88b3d163caa06ff265c46822bce_r.jpg "&gt; I plug in ~ I plug in ~
&lt;img data-rawheight= "460" data-rawwidth= "424" src= "https://pic2.zhimg.com/ 05b3bdb24a4aaa14f1cd6ab9eabaf4a5_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 424 "data-original=" https:// Pic2.zhimg.com/05b3bdb24a4aaa14f1cd6ab9eabaf4a5_r.jpg "&gt; Why can I plug it? Because the blue div is ignored by the box next to it. Why can you plug it? Because the blue div is ignored by the box next to it.
The third case: absolute positioning.
Delete Float:left, plus postion:absolute. Like float, the box next to it ignores the presence of the blue Div and is positioned on the left border. But ~
textAlso ignores the presence of the blue Div, with the left border positioned on top!
&lt;img data-rawheight= "628" data-rawwidth= "714" src= "https://pic4.zhimg.com/ 5a0552d7af2042352d49055df3484087_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 714 "data-original=" https:// Pic4.zhimg.com/5a0552d7af2042352d49055df3484087_r.jpg "&gt; &lt;img data-rawheight= "622" data-rawwidth= "797" src= "https://pic3.zhimg.com/ Dfcd3fc3f5439a10b7fa3fd311225e66_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 797 "data-original=" https:// Pic3.zhimg.com/dfcd3fc3f5439a10b7fa3fd311225e66_r.jpg "&gt;3d view is also successfully ignored, insert ~ The 3D view is also the success of ignoring, inserting ~
&lt;img data-rawheight= "426" data-rawwidth= "459" src= "https://pic1.zhimg.com/ 4bd78656641cbd9783fcbc9d5e4a2c00_b.jpg "class=" Origin_image zh-lightbox-thumb "width=" 459 "data-original=" https:// Pic1.zhimg.com/4bd78656641cbd9783fcbc9d5e4a2c00_r.jpg "&gt;
Summary:
Out of the flow of the document, that is, the element is removed from the normal layout, and the other boxes are positioned as if the element that is out of the document stream does not exist. It is important to note that when you use float to detach from the document flow, the other boxes ignore the element, but the text inside the other box will still make a position for the element, wrapping around it. For elements that use absolute positioning to detach from the document flow, the text in other boxes and other boxes ignores it.
CSS out of document flow
