steps

  1. Add float: left and width to the child element
  2. Add to the parent elementclass="clearfix
  3. Add the following code to the style
.clearfix::after{
    content:"";
    display:block;
    clear:both;
    }
Copy the code

Note: Float takes the element out of the document flow, so the height of its parent element is 0, because the height of a block element is determined by the height of its internal document flow elements. Clearfix was discovered by front-end engineers in order to regain height, for reasons that are unclear.

Example: a small page

Taobao (bluemiao10.github. IO)

Little experience

  1. To reset, I used the following code in my little page
* {margin:0;padding:0;box-sizing:border-box}

img{
    max-width:100%;
    max-height:100%
}
Copy the code
  1. When using Clearfix, always pay attention to the relationship between your parent and child elements, because many times your clearfix is in the first layer and your float-left goes straight to the third layer. I often find that float-left/right doesn’t work, only to check it later and realize that it was a mistake. For example
 <aside class="logo">
                <a href="https://www.taobao.com/" target="_blank"><img src="images/image1.png" alt="logo"></a>
 </aside>
Copy the code

That should be the case

        .logo>a>img {
            float: left;
            height: 120px;
            margin-top: 20px;
        }
Copy the code

If I do

        .logo>img {
            float: left;
            height: 120px;
            margin-top: 20px;
        }
Copy the code

3. In the top three-column layout, the right layout div must be placed in front of the middle layout div, otherwise the right layout border will always be in the bottom right corner of the entire outside border, but the order is reversed. It should be fixed on both sides and adaptive in the middle. When you start learning, you still need to read more documents.

4. The previous debugging method is always to add border, but in some cases, such as average layout, the width of boder-box will calculate the border, then you may make mistakes in the margin, so you can use outline, it is outward, so there is no impact.

5. It can be usedmargin-left:auto; margin-right:auto;To achieve adaptive centralization relative to the entire page.