CSS styles-How do I clear elements floating?

clear Floating This problem, do the front-end should be familiar with, the following 4 methods for everyone to refer to

1. use Clear:both to clear floating

example 1: Using p
html code	css code
<p class=" box "; & Lt;p class= "P" ></P> < Span style= "font-family:arial; Font-size:10pt "> <p class=" clear "></P> </P>	.box{width:300px;margin:0 Auto;border : 10px solid #000;} .p{width:200px;height:200px;background:red;float:left;} .clear{Height:0px;font-size:0;clear:both;overflow:hidden;}
Example 2: using <br clear= "All" >
<p class= "box" > <p class= "P" ></p> <br clear= "All"/> </p>	.box{width:300px;margin:0 Auto;border : 10px solid #000;} .p{width:200px;height:200px;background:red;float:left;}
example 3: Pseudo-class object ::after+zoom:1 ( recommended use of )
<p class= "box Clear" > <p class= "P" ></p> </p>	. box{margin:0 auto;border:10px solid #000;} . p{Width:200px;height:200px;background:red;float:left;} . Clear{zoom:1;} . Clear:after{display:block;clear:both;content: ""; visibility:hidden;height:0}

2. using the overflow property

html code	css code
<p class=" box "; & Lt;p class= "P1" ></P> < Span style= "font-family:arial; Font-size:10pt "></P>	Overflow:auto; . p1{Width:260px;height:400px;background:red;float:left;} Note: Overflow:auto; ,Overflow:hidden; all can

3. using display properties

html code	css code
<p class= "box" > <p class= "P" ></p> </p>	. box{width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} . p{Width:200px;height:200px;background:red;float:left;} Note: The parent element cannot be centered horizontally, and the parent element uses Text-align:center to resolve

4. parent element floating

html code	css code
<p class= "box" > <p class= "P" ></p> </p>	. box{width:300px;margin:0 auto;border:10px solid #000; float:left;} . p{Width:200px;height:200px;background:red;float:left;} Note: The parent element cannot be centered horizontally, and you can use positioning to resolve position:relative; left:50%; Margin-left: -150px;