There are 8 methods to clear the CSS float, and 8 css float methods.

There are 8 methods to clear the CSS float, and 8 css float methods.

The display effect may be different in various browsers, which makes it more difficult to clear floating. The following describes eight methods to clear floating. The test has passed ie chrome firefox opera, for more information, see

 

Clear floating is a function that every web Front-end designer must master. Css clear floating Daquan, a total of 8 methods.

Floating will bring up and down the current tag, and affect the position of the front and back labels, parent labels, and width height attributes. In addition, the same code may display different effects in various browsers, which makes clearing floating more difficult. There are multiple methods to solve the problem caused by floating, but some methods still have problems in browser compatibility.

The following are eight methods to clear the float (ie chrome firefox opera has been used for testing, and the following three methods are only available for understanding ):

1. The parent div defines the height.

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */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"> div2 </div>

　　

Principle: if the parent div manually defines the height, the parent div cannot automatically obtain the height.

Advantages: simple, less code, easy to master

Disadvantage: It is only suitable for layout with fixed height. It must be accurate. If the height is different from that of the parent div, problems may occur.

Suggestion: it is not recommended. It is only recommended for layout with fixed height.

2. Add the empty div label clear: both at the end.

 

<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}/* clear floating Code */. clearfloat {clear: both} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> <div class = "clearfloat"> </div> <div class = "div2"> div2 </div>

　　

Principle: add an empty div and clear the floating with clear: both raised by css, so that the parent div can automatically get the height.

Advantages: simple, less code, good browser support, and not prone to strange problems

Disadvantages: Many beginners do not understand the principle. If there are many floating la s on the page, a lot of empty divs will be added, making people feel bad.

Suggestion: it is not recommended, but this method was previously used to clear floating

3. 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}/* clear floating Code */. clearfloat: after {display: block; clear: both; content: ""; visibility: hidden; height: 0 }. 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 or above is supported by non-IE browsers: after. The principle is similar to method 2. zoom (IE conversion has attributes) can solve the floating problem of ie6 and ie7.

Advantages: Good browser support, not prone to strange issues (currently: large websites are used, such as Teng Xun, Netease, Sina, etc)

Disadvantages: There are many codes, and many beginners do not understand the principle. It is necessary to combine two sentences of code to support mainstream browsers.

Suggestion: It is recommended that public classes be defined to reduce CSS code.

4. Parent div defines overflow: hidden

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */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"> div2 </div>

　　

Principle: width or zoom: 1 must be defined, and height cannot be defined. When overflow: hidden is used, the browser automatically checks the height of the floating area.

Advantages: simple, less code, and good browser support

Disadvantage: it cannot be used with position because the excess size is hidden.

Suggestion: We recommend that you only use position or a friend who has a deep understanding of overflow: hidden.

5. Parent div defines overflow: auto

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */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"> div2 </div>

　　

Principle: width or zoom: 1 must be defined, and height cannot be defined. When overflow: auto is used, the browser automatically checks the height of the floating area.

Advantages: simple, less code, and good browser support

Disadvantage: the scroll bar appears when the internal width and height exceed the parent div.

Suggestion: it is not recommended. If you need a scroll bar or make sure that your code does not appear, use it.

6. Parent div also floats together

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; margin-bottom: 10px; float: left }. div2 {background: #800080; border: 1px solid red; height: 100px; width: 98%;/* solution Code */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: When all the code is floating together, it becomes a whole.

Advantage: no advantage

Disadvantage: there will be a new floating problem.

Suggestion: it is not recommended.

7. Parent div defines display: table

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */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: Convert div attributes into tables

Advantage: no advantage

Disadvantage: new unknown problems may occur.

Suggestion: it is not recommended.

8. Add the br label clear: both at the end.

<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"> div2 </div>

　　

Principle: parent div defines zoom: 1 to solve the IE floating problem. Add the br label clear: both at the end.

Suggestion: it is not recommended.