If you’re not familiar with float, check out the article on float. Portal: CSS float

We know that if we encounter a floating element within a parent element, the height of the parent element will collapse. There are many solutions to the problem of parent element height collapse. For each scenario, we will conduct an in-depth analysis.

Add empty block-level elements

This is easy, but note that the empty element must be a block-level element, not an inline element or an inline block element. The downside is that there are more meaningless labels. The code is as follows.

//HTML

       

    
        

        
    
        

    
        
// The element used to clear the float must be a block-level element
       


//CSS
.content {
    background:pink;
}
.clearfix {
    clear: both;
}
.float {
    width: 50px;
    height: 50px;
    float: left;
    background: tan;
}Copy the code

The reason why you can use the clear property to clear the additional effects of float is to return to the essence of the clear property.

The clear property specifies which side of the element does not allow other floating elements.

Essence: In CSS2.1, the clear attribute adds clear space above the upper margin of the clear element (that is, the element for which the clear attribute is set), while the margin of the element itself remains unchanged. Say the detail, that is, to set clear to elements: left | right | to both, can make clear elements on the outside from the border just outside under the edge of the floating element from the boundary.

overflow

In the parent element set overflow: hidden | auto | scroll can solve the problem of the parent element height collapse. Why is it possible to solve the problem of parent element height collapse through Overflow? There is another knowledge point involved here, namely BFC (Block-level formatting context). Let’s look at the solution first. The principle will be shared in the next article.

The parent element Settings: overflow: hidden | auto;

Here are the renderings of setting overflow before and after



: after pseudo elements

Add the :after pseudo-element to the parent element to solve the problem of collapsing the parent element height.

//HTML  

       

    
        

        
    
        

    
        
Will it be covered?


       


//CSS
.content {
background: tan;
&:after {
        content: '.';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
.float {
    width: 100px;
    height: 100px;
    float: left;
    background: olive;
}Copy the code

When placed in the browser, the parent element is displayed at normal height.

To understand the pseudo-element solution to the height collapse of the parent element, you need to know a few extra things.

floating
  • When an element (left float | | right), the element will flow out of the ordinary document.
  • When an element floats and the element following the DOM has no text, the floating element overrides the element immediately following it.
  • When an element floats and the element following the DOM has text content, the floating element also overwrites the element immediately following it, but the text is displayed around the float element instead of being overwritten.

What does that mean? It makes sense when you think about it. Here’s a piece of code explaining the first three points.

//HTML is the same as above, with div changed to span and class changed to float-inline. //CSS .float-inline { float:left; width:100px; height:100px; background:pink; }Copy the code

The corresponding effect is as follows.

At this point, you can set the width and height to indicate that the inline element span’s inline box becomes a block box. Also, the next element on the same level as the float element has text content, which surrounds the float element. Because of the floating element, the height of the parent element collapses.

Pseudo elements

A pseudo-element, as the name suggests, is one that adds content after an element.

  • The addition of pseudo-element content must be placed in the Content attribute.
  • Pseudo-elements are inline elements, but you can change the type of the box of the pseudo-elements by using display.

Ok, here we go. We now have the knowledge we need to understand :after pseudo-elements clean float. Put the solution on. Analyze in order.

.clearFix: {zoom:1} // Trigger HasLayout in IE.. clearFix :after {content: '.'; display: block; clear: both; height: 0; visibility: hidden; }Copy the code
  • Set the content of the pseudo-element to ‘.’, and the content can be anything.
  • Set the height: 0;
  • Set the visibility: hidden. In this case, we want to hide the content.
  • Set clear: both. Float is not allowed on either side of the clear pseudo-element.
  • The most important thing is to set the display property to block, and only block, not inline-block. As I said earlier, pseudo-elements are inline elements, and you cannot set width and height for inline elements. Set display:block, then the element can be set width and height, set height:0, then the element does not occupy any height. If you set only the first four properties without changing the display element, it will have no effect.

Here are three ways to clear the additional effects of a float, which is the effect of a float element on its siblings and parents. Here’s a little summary:

  • The idea behind adding empty divs and :after pseudo-elements is to use the clear attribute. The clear attribute adds clear space above the upper margin of the clear element (that is, the element on which the clear attribute is set), while the element margin itself remains unchanged. It also causes the upper margin margin of the clear element to be just below the lower margin margin of the floating element. Therefore, the effect of removing the additional impact of the float can be achieved.
  • The parent element uses overflow not to be visible, which is setoverflow:hidden|auto, you can also achieve the effect of clearing the float. This is where the concept of BFC is concerned and will be shared in the next article.