Why did it collapse so high

  • When you add a child element to a parent element that does not set the height attribute, the parent element has the height of the child element

  • But when a child element is added with a ‘float’ attribute, the child element drops out of the document flow and the parent element loses its supporting height. This is called height collapse.

    <style>
        #a{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
    </style>
    <div style='border:1px solid red; margin:100px; '>
        <div id="a"></div>
    </div>
Copy the code

How to solve height collapse

Sets the parent element height

  • This approach is straightforward, but requires that the exact height of the parent element be determined and not changed later

Setting the Clear property

Why use clear:both

  • Clear has four main attribute values: ‘None’, ‘left’, ‘right’, ‘both’
  • As a rule, ‘clear’ only applies to the previous sibling of the current element, and the previous element can only exist on the left or right side of the current element. ‘clear:both’ is a perfect substitute

How to use

  • We can create a tag that says’ Clear :both; ‘attribute
   <style>
        #a{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
        p{
            clear:both;
        }
    </style>
    <div style='border:1px solid red; margin:100px; '>
        <div id="a"></div>
        <p></p>
    </div>
Copy the code

To optimize the

  • As shown in the figure above, creating a new tag can solve this problem, but creating a new tag every time consumes resources, so can we optimize it?
  • We can use the: After pseudo-element and content attributes to simulate creating a new box and give it clear:both; Property, as shown below
        <style>
        #a{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
        .clearfix:after{
            display:block;
            content:"";
            clear:both;
        }
    </style>
    <div class='clearfix' style='border:1px solid red; margin:100px; '>
        <div id="a" ></div>
    </div>
Copy the code

Note: You cannot add to the child element itself, the :after pseudo-element is added to the end of the tag

Enable the BFC mode

What is landing

  • The full name of BFC is’ Block formatting context ‘, which literally translates to ‘block-level formatting context’. I personally understand it as a switch, which is turned on in some way to solve some problems later. I mainly use it here to solve the problem of height collapse
  • Note: IE7 does not support BFC mode but also has a hidden property, ‘HasLayout’, which can be accessed by ‘Zoom :1’; ‘to open

How do I enable the BFC

  • Set overflow to hidden, scroll, and auto
  • The float value is not None
  • Display set it to inline-block, tabole-cell, table-caption
  • Position is not relative or static

Personally, I would recommend modifying the ‘overflow’ attribute because it has less impact on the page than this approach

    <div style='overflow: hidden; border:1px solid red; margin:100px; '>
        <div id="a" ></div>
    </div>
Copy the code

Reference: “CSS world” + online search + their own understanding if there is a mistake, hope to put forward

I hope everyone can get the offer as soon as possible, come on, encourage each other