CSS Clear Floating Encyclopedia, total 8 ways

Clear float is a function that every web foreground designer must master.

Why is it so hard to float?

Because floating causes the current label to float, it affects both the front and back labels, the position of the parent label, and the width height property.

And the same code, in a variety of browsers display the effect may also be different, so that the removal of floating more difficult.

There are several ways to solve problems caused by floating, but there are some methods that have problems with browser compatibility.

I summarize 8 ways to clear the float based on my experience (the test has been via IE Chrome Firefox opera, the next three ways only to understand it):

1, parent div defines 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: The parent div manually defines the height, which solves the problem that the parent Div cannot automatically get to the heights.

Advantages: Simple, less code, easy to master

Cons: only suitable for highly fixed layout, to give precise height, if the height and the parent div is not the same, the problem arises

Recommendation: Not recommended, only recommended for highly fixed layouts when used

Average review score: ★★☆☆☆

2, add empty div tag at the end Clear:both

<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>

<div class= "Div2" >

Div2

</div>

Principle: Add an empty div, use CSS to improve the clear:both clear floating, so that the parent div can automatically get to the height

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

Disadvantages: Many beginners do not understand the principle; if the page floating layout more, it is necessary to add a lot of empty Div, people feel very uncomfortable

Recommendation: Deprecated, but this method is a major use of the previously used to clear the floating method

Average review score: ★★★☆☆

3, Parent div definition Pseudo-class: 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 above and non-IE browser support: After, principle and method 2 somewhat similar, zoom (ie turn to have attribute) can solve ie6,ie7 floating problem

Advantages: Browser support is good, not prone to strange problems (currently: large sites are used, such as: Tencent, NetEase, Sina, etc.)

Disadvantages: Many code, many beginners do not understand the principle, to two code combination to use, in order to let the mainstream browser support.

Recommendation: recommended, we recommend defining public classes to reduce CSS code.

Average review score: ★★★★☆

4, Parent div definition 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, and when using Overflow:hidden, the browser automatically checks the altitude of the floating area

Pros: Simple, less code, good browser support

Disadvantage: cannot be used in conjunction with position, because the size of the excess will be hidden.

Recommendation: It is recommended to use only those friends who are not using position or who understand more deeply about Overflow:hidden.

Average review score: ★★★☆☆

5, Parent div definition 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, and when using Overflow:auto, the browser automatically checks the altitude of the floating area

Pros: Simple, less code, good browser support

Disadvantage: Scroll bars appear when the internal width is higher than the parent Div.

Recommendation: Not recommended, if you need to scroll bar or make sure your code does not appear scroll bar to use it.

Average review score: ★★☆☆☆

6, the 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: All the code floats together, it becomes a whole

Pros: No advantages

Cons: New floating issues are created.

Recommendation: Not recommended, only for understanding.

Average review score: ★☆☆☆☆

7, Parent div definition display:table

<style type= "Text/css" >

. Div1{background: #000080; border:1px solid red;/* Solution Code */width:98%;d isplay: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: Turning div attributes into tables

Pros: No advantages

Cons: New and unknown issues arise.

Recommendation: Not recommended, only for understanding.

Average review score: ★☆☆☆☆

8, add BR tag at the end 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" >

Div2

</div>

Principle: Parent div definition zoom:1 to solve IE floating problem, add BR tag at the end Clear:both

