Detailed explanation of the reasons and solutions for floating elements to collapse the height of their parent elements

Detailed explanation of the reasons and solutions for floating elements to collapse the height of their parent elements

Floating elements cause their parent elements to collapse in height. We often encounter a situation where, after setting an element to float float:left/right; , if the parent element of the element has a background color, you will find that the background color of the parent element disappears; if the parent element has a border, the floating element cannot expand the border.

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 float to the parent element as well. This allows the parent element and the child element to float out of the document flow, ensuring that the child element is within the parent element. In this way, the parent element can adapt to the height of the child element. However, this method has a disadvantage, which will definitely affect the arrangement of elements after the parent element and even affect the layout.
2. Give the parent element a fixed height. This method is suitable for situations where the height of the child element is known and fixed.
3. Add a block-level element and set clear:both; to this element to clear the float. This solution was used a long time ago. Create a new empty div and set clear: both for this div. This undoubtedly adds meaningless tags. It is not good to have too many such tags in a large page.
4. Add overflow:hidden; [Detailed explanation later]
5. Clear floats through pseudo-class ::after [detailed explanation later]

overflow:hidden;

  • Hide overflow. When the content exceeds its parent element, you can use this attribute and value to cut off the overflowing part to make the page more beautiful.
  • Clear the float. When the child element floats, add overflow: hidden to the parent element. According to its first characteristic, the part of the child element that exceeds the limit should be cut off. However, because the child element floats, it cannot be cropped. Therefore, the parent element can only increase its height to wrap the child element, so that the parent element has a height, and this height is adaptive to the child element, so that the floating child element is included in the parent element.

::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

Recommend

Linux system dual network card binding configuration implementation

System version [root@ ~]# cat /etc/redhat-release...

Use Nginx to build a streaming media server to realize live broadcast function

Written in front In recent years, the live stream...

MySQL Optimization: InnoDB Optimization

Study plans are easily interrupted and difficult ...

CSS3 implementation example of rotating only the background image 180 degrees

1. Mental Journey When I was writing the cockpit ...

Vue page monitoring user preview time function implementation code

A recent business involves such a requirement tha...

MYSQL database GTID realizes master-slave replication (super convenient)

1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...

Summary of the application of decorative elements in web design

<br />Preface: Before reading this tutorial,...

A brief discussion on React Component life cycle functions

What are the lifecycle functions of React compone...

Detailed explanation of Docker Swarm concepts and usage

Docker Swarm is a container cluster management se...

Solution to Linux server graphics card crash

When the resolution of the login interface is par...

Perfect solution to Docker Alpine image time zone problem

Recently, when I was using Docker to deploy a Jav...

Detailed explanation of using INS and DEL to mark document changes

ins and del were introduced in HTML 4.0 to help au...

Why is it not recommended to use an empty string as a className in Vue?

Table of contents Compare the empty string '&...