Floating will cause the current label to float up and affect the position of the front and back labels, parent labels, and width height properties. And the same code may look different in different browsers, making it harder to clean up floats. There are several ways to solve the float problem, but some of them have problems with browser compatibility.

Here is a summary of 8 ways to clear the float (test has passed ie Chrome Firefox Opera, the last three methods just do understand it)

1. Universal Cleanup (recommended)

CSS Style 1.. div1{background:# 000080; border:1px solid red; }
    .div2{background:# 800080; border:1px solid red; height:100px; margin-top:10px; }
    .left{float:left; width:20%; height:200px; background:#DDD; }
    .right{float:right; width:30%; height:80px; background:#DDD; }/* Universal clear float code */ <! -- :after must have -->.cl:after {content:""; display: block; overflow:hidden; visibility:hidden; height: 0; clear: both; } .cl { zoom: 1; Cl :after (pseudo-object cleaner) {content:"."[display: block] [display: block] [display: block] clear:both; display:block; 【 tO solve the problem of height in IE6 】, the visibility:hidden; } p{zoom:1} p{zoom:1} p{zoom:1} p{zoom:1} } IE8 and non-IE browsers only support: After, ZOOM (IE proprietary attributes) to solve IE6, IE7 floating problems Advantages: simple, less code, good browser support, also known as universal clearanceAdd an empty div at the end of ###/* Clear float code */. Clearfloat {clear:both; height:0; overflow:hidden; } <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
        <div class="clearfloat"></div> 
    </div> 
    <div class="div2"> div2 </div> principle: add an empty div, using CSS to improve the clear:both clear float, so that the parent div can automatically obtain the height advantages: simple, less code, browser support, not prone to strange problems disadvantages: many beginners do not understand the principle; If the page has a lot of floating layout, add a lot of empty divs, which can be very uncomfortable. Suggestion: Not recommended, but this method is the main method used in the past to clear floatingCopy the code

The parent div defines height

<style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
    .div2{background:# 800080; border:1px solid red; height:100px; margin-top:10px; }
    .left{float:left; width:20%; height:200px; background:#DDD; }
    .right{float:right; width:30%; height:80px; background:#DDD; }
</style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
    </div> 
    <div class="div2"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;" Advantages: simple, less code, easy to master Disadvantages: Only suitable for fixed height layout, accurate height should be given, if the height is different from the parent div, problems may occur suggestion: Do not use this div, only recommended for fixed height layoutCopy the code

3. The parent div defines pseudo classes :after and zoom

    <style type="text/css"> 
        .div1{background:# 000080; border:1px solid red; }
        .div2{background:# 800080; border:1px solid red; height:100px; margin-top:10px}
        .left{float:left; width:20%; height:200px; background:#DDD} 
        .right{float:right; width:30%; height:80px; background:#DDD} /* clearfloat code */. Clearfloat :after{display:block; clear:both; content:""; visibility:hidden; height:0; overflow:hidden; } .clearfloat{zoom:1} </style> <div class="div1 clearfloat"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div> 
        <div class="div2"> div2 </div> principle: IE8 above and non-IE browser only support :after, principle and method 1 a little similar, ZOOM (IE turn to have attributes) can solve IE6, IE7 floating problems advantages: browser support good, not easy to appear strange problems (at present: large sites are used, such as: Tengxun, netease, Sina, etc.) disadvantages: code many, many beginners do not understand the principle, to use two lines of code to allow mainstream browsers are supported. Suggestion: It is recommended that you define common classes to reduce CSS code.Copy the code

4, the parent div defines overflow:hidden

    <style type="text/css"> 
        .div1{background:# 000080; border:1px solid red; /* width:98%; overflow:hidden}
        .div2{background:# 800080; border:1px solid red; height:100px; margin-top:10px; width:98%}
        .left{float:left; width:20%; height:200px; background:#DDD} 
        .right{float:right; width:30%; height:80px; background:#DDD} 
    </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div> 
        <div class="div2"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;" Cannot be used in conjunction with Position, because the size beyond the position is hidden. Suggestion: Only recommended for those who do not use Position or have a deep understanding of Overflow: Hidden.Copy the code

The parent div defines overflow:auto

    <style type="text/css"> 
        .div1{background:# 000080; border:1px solid red; /* width:98%; overflow:auto}
        .div2{background:# 800080; border:1px solid red; height:100px; margin-top:10px; width:98%}
        .left{float:left; width:20%; height:200px; background:#DDD} 
        .right{float:right; width:30%; height:80px; background:#DDD} 
    </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div> 
        <div class="div2"< div style = "box-sizing: border-box; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;" A scroll bar appears when the internal width and height exceed the parent div. Suggestion: Not recommended, use it if you need to have a scrollbar or make sure your code doesn't have a scrollbar.Copy the code

6. The parent div also floats

    <style type="text/css"> 
        .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
        .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
        .left{float:left; width:20%; height:200px; background:#DDD} 
        .right{float:right; width:30%; height:80px; background:#DDD} 
    </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div> 
        <div class="div2"> div2 </div> Principle: all code floating together, becomes a whole advantage: no advantage Disadvantages: new float problem. Suggestion: Not recommended, only for understanding.Copy the code

7. The parent div defines display:table

    <style type="text/css"> 
        .div1{background:# 000080; border:1px solid red; /* width:98%; display:table; margin-bottom:10px; }
        .div2{background:# 800080; border:1px solid red; height:100px; width:98%; }
        .left{float:left; width:20%; height:200px; background:#DDD} 
        .right{float:right; width:30%; height:80px; background:#DDD} 
    </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
        </div> 
        <div class="div2"> div2 </div> Principle: turn div attributes into tables Advantages: No advantages Disadvantages: new unknown problems arise. Suggestion: Not recommended, only for understanding.Copy the code

8, End with br label clear:both

    style type="text/css"> 
        .div1{background:# 000080; border:1px solid red; margin-bottom:10px; zoom:1}
        .div2{background:# 800080; border:1px solid red; height:100px}
        .left{float:left; width:20%; height:200px; background:#DDD} 
        .right{float:right; width:30%; height:80px; background:#DDD} 
        .clearfloat{clear:both} 
    </style> 
        <div class="div1"> 
            <div class="left">Left</div> 
            <div class="right">Right</div> 
            <br class="clearfloat" /> 
        </div> 
        <div class="div2"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"Copy the code