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
System version [root@ ~]# cat /etc/redhat-release...
Written in front In recent years, the live stream...
Study plans are easily interrupted and difficult ...
1. Mental Journey When I was writing the cockpit ...
A recent business involves such a requirement tha...
1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...
<br />Preface: Before reading this tutorial,...
What are the lifecycle functions of React compone...
Docker Swarm is a container cluster management se...
When the resolution of the login interface is par...
Recently, when I was using Docker to deploy a Jav...
ins and del were introduced in HTML 4.0 to help au...
In fact, many companies have functions similar to...
Table of contents Compare the empty string '&...
Preparation: 192.168.16.128 192.168.16.129 Two vi...