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!