How to use CSS to clear floating methods

This article mainly describes how to use the CSS to clear the floating method, has a certain reference value, now share to everyone, the need for friends can refer to

In a variety of browsers display the effect may also be different, so that the removal of floating more difficult, the following summary of 8 ways to clear floating, testing has passed IE chrome Firefox opera, the need for friends can refer to the next

Clear float is a function that every web foreground designer must master. CSS Clear Floating Encyclopedia, a total of 8 methods.
Floating causes the current label to float, affecting 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.
Here is a summary of 8 ways to clear the float (test has been via IE Chrome Firefox opera, the next three ways only to understand it):
1, parent p defines height

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Solution code */height:200px;}. p2{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> <p class= "P1" > <p class= "left" >Left</p> <p class= "right" >Right</p> </p> <p class= "P2" > P2 </p>

Principle: The parent P manually defines the height, which solves the problem that the parent P cannot automatically get to the heights.
Advantages: Simple, less code, easy to master
Disadvantage: only suitable for highly fixed layout, to give the exact height, if the height and the parent p is not the same when the problem arises
Recommendation: Not recommended, only recommended for highly fixed layouts when used
2, at the end of the Add empty P label Clear:both

<style type= "Text/css" >. P1{background: #000080; border:1px solid Red}. P2{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> <p class= "P1" > <p Class= "left" >Left</p> <p class= "right" >Right</p> <p class= "Clearfloat" ></p> </p > <p class= "P2" > P2 </p>

Principle: Add an empty p, use CSS to improve the clear:both clear floating, so that the parent P 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 p, people feel very bad
Recommendation: Deprecated, but this method is a major use of the previously used to clear the floating method
3, parent p defines pseudo-class: After and zoom

<style type= "Text/css" >. P1{background: #000080; border:1px solid Red;} p2{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> <p class= "P1 clearfloat" > <p class= "left" > left</p> <p class= "right" >Right</p> </p> <p class= "P2" > P2 </p>

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 use two code together to let the mainstream browser support.
Recommendation: recommended, we recommend defining public classes to reduce CSS code.
4, parent P-defined Overflow:hidden

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Fix Code */width:98%;overflow:hidden}. p2{ 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> <p class= "P1" > <p class= "left" >Left</p> <p class= "right" >Right</p> </p> <p class= "P2" > P2 </p>

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.
5, parent P-defined Overflow:auto

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Fix Code */width:98%;overflow:auto}. p2{ 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> <p class= "P1" > <p class= "left" >Left</p> <p class= "right" >Right</p> </p> <p class= "P2" > P2 </p>

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 p.
Recommendation: Not recommended, if you need to scroll bar or make sure your code does not appear scroll bar to use it.
6, parent p also floats together

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Solution Code */width:98%;margin-bottom:10px; Float:left}. P2{background: #800080; border:1px solid red;height:100px;width:98%;/* Fix Code */clear:both}. Left{float: Left;width:20%;height:200px;background: #DDD}. Right{float:right;width:30%;height:80px;background: #DDD} </ style> <p class= "P1" > <p class= "left" >Left</p> <p class= ' right ' >Right</p> </p> <p class= "P2" > P2 </p>

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.
7, parent P-defined display:table

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Solution Code */width:98%;d isplay:table; margin-bottom:10px;} . P2{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> <p class= "P1" > < P class= "left" >Left</p> <p class= "right" >Right</p> </p> <p class= "P2" > P2 </p>

Principle: Change the P attribute to a table
Pros: No advantages
Cons: New and unknown issues arise.
Recommendation: Not recommended, only for understanding.
8, add BR tag at the end Clear:both

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;margin-bottom:10px;zoom:1}. P2{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> <p class= "P1" > <p class = "Left" >Left</p> <p class= "right" >Right</p> <br class= "clearfloat"/> </p> <p class= "P2" > P2 </p>

Principle: Parent P definition zoom:1 to solve IE floating problem, add BR tag at the end Clear:both
Recommendation: Not recommended, only for understanding.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!