Several ways to share CSS to clear floating

This article mainly to share with you several CSS clear floating method, hope to help everyone.

1. Parent p defines height

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;height:200px;}    . 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>

Parent p manually defines height, which resolves an issue where parent p cannot automatically get heights (only recommended for highly fixed layouts)

2. Add empty P tag at the end Clear:both

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

Add an empty p, use CSS to improve the clear:both to clear the float, so that the parent p automatically get the height (more previously used)

3. Parent P defines pseudo-class: After and zoom

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;}    . Left{float:left;width:20%;height:200px;background: #DDD}    . right{float:right;width:30%;height:80px; Background: #DDD}    . 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>

IE8 and non-IE browser support: after,zoom (ie proprietary properties) to solve IE6, IE7 floating problem

4. Parent P definition Overflow:hidden

<style type= "Text/css" >. P1{background: #000080; border:1px solid Red;width:98%;overflow:hidden}    . 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>

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

5. Parent definition: Overflow:auto

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

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

6, parent p also floating together

<style type= "Text/css" >. P1{background: #000080; border:1px solid Red;width:98%;margin-bottom:10px;float:left}    . 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>

All the code floats together, creating a new float, just for understanding

7. Parent P Definition Display:table

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;width:98%;d Isplay:table;margin-bottom : 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>

Turn the properties of P into a table

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

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

Related recommendations:

about how CSS clears the float

CSS to clear floating methods

What are the methods and pros and cons of clearing floats