Floating elements cause their parent elements to collapse in height. We often encounter a situation where, after setting an element to float From the above two pictures, we can see that after adding the floating elements, the li elements are arranged horizontally according to the rules, but the parent element disappears. Add a 5px border to the parent element. After the li element is floated, the border is not stretched by the content. In the first example, it seems that the parent element disappears, but in the second example, it is found that the parent element does not disappear, but the height is calculated as 0. This requires going back to the characteristics of floating elements to explain this problem. "When an element is set to float, it will automatically leave the document flow." Translated into vernacular, it means that after the element floats, it is no longer under the jurisdiction of the entire document flow, so its previous height in the parent element will no longer exist with the floating, and at this time the parent element will assume that there is no content in it (the premise is that the parent element is not set with a fixed height. If the parent element itself has a fixed height, this situation will not occur) Solution: 1. Add overflow:hidden;
::after pseudo-class Using pseudo-classes to clear floats has the same effect as creating an empty div and setting it to clear: both;, except that the pseudo-classes are used instead of the empty div element. <div class="box"> <div class="son">I am a floating child element</div> </div> .box { width:400px; background:#F00; } .son { float:left; } .son::after { content:""; clear:both;/*clear floating*/ display:block;/*Make sure the element is a block-level element*/ } This concludes this article on the reasons and solutions for why the floating element causes the height of its parent element to collapse. For more information on the collapse of the height of the parent element, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: MySQL Series 8 MySQL Server Variables
>>: Three Discussions on Iframe Adaptive Height Code
MySQL 5.0 has become a classic because of its few...
This article shares the specific code of jQuery t...
Environmental Description Server system: Ubuntu 1...
1. The relationship between fonts and character d...
1. Link's to attribute (1) Place the routing ...
Why do we need permission management? 1. Computer...
Physical Structure of an InnoDB Index All InnoDB ...
I believe that the Internet has become an increas...
1. Storage Engine In the last section, we mention...
Table of contents 1. Why do we need vue3? 2. Adva...
1. Download the required packages wget -P /usr/lo...
Basic environment configuration Please purchase t...
The specific code for sending emoticons in the vu...
Find information Some methods found on the Intern...
Table of contents Combining lookahead and lookbeh...