Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

1. Document flow and floating

1. What is document flow?

In HTML, document flow can also be called standard flow or normal flow. Elements are displayed from top to bottom and from left to right. Block-level elements occupy one line by default. Inline or inline block-level elements only occupy the content part or the part occupied by themselves. They do not occupy a line as domineeringly as block-level elements. In fact, this is the same as the natural phenomenon of waterfalls flowing from top to bottom^_^.

2. Restless Floating

We have already had a preliminary understanding of the document flow above, but the display of elements on a web page is not enough just relying on the document flow. For example, in the trademark navigation section of Tmall Mall, each list item li of the unordered list ul is a block-level element (display:list-item). According to the document flow, block-level elements occupy a line, so each li will be displayed from top to bottom, but in fact each li only occupies its own part, please see the following figure:

So why don't these li elements display according to the document flow? The reason is that they have been separated from the document flow. There are two ways to make an element out of the document flow: the first is floating (float); the second is positioning (position).
If document flow is the child in other families who listens to his parents and is a very well-behaved and sensible child, then floating is the child in our own family who is disobedient and restless. Just like when we were little, our parents often told us, "Look at how obedient other people's children are, and then look at yourself, how...

2. Floating is a double-edged sword

Since floating has taken the element out of the document flow, we can make the display of the element more flexible, such as making a simple navigation bar:

 body{
        margin:0;
        background-color:#333;
    }
    ul{
        list-style:none;
        width:500px;
        margin:100px auto 0;
        padding:0;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    ul li{
        float:left;
        width:100px;
        height:30px;
        background-color:#fff;
    }
    ul li a
        display:block;
        height:100%;
        line-height:30px;
        color:#000;
        text-decoration:none;
        text-align:center;
    }

 <ul class="nav clearfix">
        <li>
            <a href="">Navigation 1</a>
        </li>
        <li>
            <a href="">Navigation 2</a>
        </li>
        <li>
            <a href="">Navigation 3</a>
        </li>
        <li>
            <a href="">Navigation 4</a>
        </li>
        <li>
            <a href="">Navigation 5</a>
        </li>
    </ul>

Another example is the Holy Grail layout from earlier

   body{
        margin:0;
    }
    .wrap{
        padding:0 300px;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .middle,.left,.right{
        float:left;
        position:relative;
        height:100px;
    }
    .middle{
        width:100%;
        background-color:#333;
    }
    .left{
        left:-300px;
        width:300px;
        margin-left:-100%;
        background-color:#ccc;
    }
    .right{
        right:-300px;
        width:300px;
        margin-left:-300px;
        background-color:#f00;
    }

  <div class="wrap clearfix">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

At the same time, floating will also bring other effects, for example, the floating elements will cover the elements in the document flow behind.

  body{
        margin:0;
    }
    .box-1{
        float:left;
        width:200px;
        height:200px;
        background-color:#333;
    }
    .box-2{
        width:200px;
        height:300px;
        background-color:#ccc;
    }

 <div class="box-1"></div>
    <div class="box-2"></div>

To solve the above problem, we just need to clear the float of BOX-2.

  .box-2{
        clear:both;
        width:200px;
        height:300px;
        background-color:#ccc;
    }

In addition, floating elements will cause the height of the parent element to collapse. If a child element of a block-level element with no height is floated, the height of the block-level parent element will be 0. See the following code:

   body{
        margin:0;
    }
    .box-1{
        width:300px;
        background-color:#333;
    }
    .box-2{
        float:left;
        width:200px;
        height:300px;
        background-color:#ccc;
    }

  <div class="box-1">
        <div class="box-2"></div>
    </div> 

You should know that for an element, when it is not given a fixed height, its height is extended by the content. That is to say, if there is no content in this element, its height is 0. When this element has content, it has a height (that is, the height of the content). Please see the following figure:

 .box-1{
        width:100px;
        background-color:#f00;
    }

<div class="box-1"></div> 

<div class="box-1">I am the content</div> 

In the above figure, although the parent element BOX-1 has a child element BOX-2, its height is 0. What is going on? Because BOX-2 floats up, the child element BOX-2 and the parent element BOX-1 are not at the same height, so BOX-1 cannot wrap BOX-2. Please see the following figure:

The above picture shows the problem of parent element height collapse caused by floating

3. How to solve the problem of parent element height collapse caused by floating

1. Child method

Add a child element with a height of 0 at the end of the child elements and clear the floating. Please take a look at the code:

   body{
        margin:0;
    }
    .box-1{
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }
    .box-3{
        clear:both;
    }

<div class="box-1">
        <div class="box-2"></div>
        <div class="box-3"></div>
    </div>

The effect diagram is as follows. The red box is the parent element and the yellow box is the child element BOX-2.

2. Parent method

Set display:inline-block to the parent element;
The code is as follows:

  body{
        margin:0;
    }
    .box-1{
        display:inline-block;
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }

 <div class="box-1">
        <div class="box-2"></div>
    </div>

Set overflow:hidden to the parent element;
The code is as follows:

   body{
        margin:0;
    }
    .box-1{
        overflow:hidden;
        width:300px;
        background-color:#f00;
    }
    .box-2{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }

  <div class="box-1">
        <div class="box-2"></div>
    </div>

The above two methods are actually based on BFC (block formatting context). Because BFC allows the parent element to contain floating child elements, thereby solving the problem of parent element height collapse, so as long as BFC can be triggered, it will be fine.

There is nothing much to say about giving the parent element a fixed height, so I will not go into details, because in actual development, the height is generally supported by the content.

Use the pseudo element: after and clear the float. Please see the following code:

  body{
        margin:0;
    }
    .clearfix{
        width:300px;
        background-color:#f00;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .box{
        float:left; 
        width:200px;
        height:150px;
        background-color:#ff0;
    }

 <div class="clearfix">
        <div class="box"></div>
    </div>

4. Final

This concludes this article on several CSS methods to solve the problem of parent element height collapse caused by floating. For more relevant CSS parent element height collapse content, 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!