This article describes 6 ways to clear the float of HTML elements for your reference, see below in detail
What happens when you use Display:inline-block: 1. Make block elements appear on one line 2. Make inline support wide by 3. The line break is parsed 4. The width is not set by the content of 5. In ie6,7 next step support block label Because the Inline-block property is parsed (with gaps) when it wraps, the workaround uses a floating float:left/right use float when it occurs: 1. Make block elements appear on one line 2. Make the inline element support wide by 3. Do not set the width of the height from the content to open 4. Line breaks are not resolved (so the method of clearing the gap using the inline elements can be used to float) 5. The element adds a float that moves out of the document stream, in one of the specified directions, Until the boundary of the parent is encountered or another floating element stops (the document flow is the location in the document where the object can be displayed in the arrangement) the code is as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled document </title> <style> div,span{height:100px;background:red;border:1px Solid #000; Float:left;} /* Inline-block 1. Makes the block element appear on one line 2. Make inline support wide by 3. The line is parsed 4. Width is not set width by the content of 5. Block label float is not supported under ie6,7:1. Make the block element appear on one line 2. Make inline support wide by 3. Width is not set width by the content open * * </style> </head> <body> <div class= "Div1" >div1</div> <div class= " Div2 ">div2</div> <span class=" Span1 ">span1</span> <span class=" Span2 ">span2</span > </body> </html> The following code only box1 float, then box1,box2 overlap together.Both floats will not overlap code as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style>. box1{width:100px;height:100px;background:red; Float:left;} . box2{width:200px;height:200px;background:blue/* float:left;*/} </style> </head> <body> <div class= "Box1" ></div> <div class= "Box2" ></div> </body> </html> Clear Float method: 1. The parent is also floated (this happens when the parent margin:0 auto; is not centered) the code is as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style>. box{width:300px;margin:0 auto;border:10px Solid # 000; Float:left;} . div{Width:200px;height:200px;background:red;float:left}/* float 1. Add a float to the parent (not centered) * * * </ style> </head> <body> <div class= "box" > <div class= "div" ></div> </div &gT </body> </html> 2. Add Display:inline-block to Parent (same Method 1, not centered.) Only ie6,7 center) Code is as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style>. box{width:300px;margin:0 auto;border:10px Solid # 000; Display:inline-block;} . div{Width:200px;height:200px;background:red;float:left}/* float 1. To the parent also add float 2. Parent Plus Display:inline-block */</style> </head> <body> <div class= "box" > <DIV class = "Div" ></div> </div> </body> </html> 3. Add <div class= "clear" under floating elements ></ div> clear{Height:0px;font-size:0;clear:both} But under the IE6, the block element has the minimum height, namely when height<19px, the default is 19PX, the solution: font-size:0; or Overflow:hidden; The code is as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled TextFile </title> <style> box{width:300px;margin:0 auto;border:10px solid #000; div{width:200px;height:200px; Background:red;float:left;} . clear{Height:0px;font-size:0;clear:both/* float 1. To the parent also add float 2. Add Display:inli to Parent Ne-block 3. Add <div under floating element class= "clear" ></div> . clear{height:0px;font-size:0; Clear:both;} * </style> </head> <body> <div class= "box" > <div class= "div" ></div> & nbsp <div class= "clear" ></div> </div> </body> </html> 4. Add under floating Element <BR clear= "All" > Code as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style>. box{width:300px;margin:0 auto;border:10px Solid # 000;} . div{Width:200px;height:200px;background:red;float:left}/* float 1. Also add a float to the parent &nbsP 2 to the parent plus Display:inline-block 3. Under the floating element add <div class= "clear" ></div> . clear{ Height:0px;font-size:0;clear:both;} 4. Add <br clear= "All"/> under floating element * </style> </head> <body> <div class= "box" > & nbsp <div class= "div" ></div> <br clear= "All"/> </div> </body> </html > 5. Add {zoom:1 to the floating element parent;}: after{content: "; Display:block;clear:both;} The code is as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style>. box{margin:0 auto;border:10px solid #000; div{ Width:200px;height:200px;background:red;float:left;} . clear{zoom:1; Clear:after{content: ""; Display:block;clear:both;} * Clear float 1. Add a float to the parent also 2. Add Display:inline-block 3 to the parent plus the <div class under the floating element = "Clear" ></div> clear{height:0px;Font-size:0;clear:both;} 4. Add <br clear= under floating element "all"/> 5. Add {Zoom:1} to the parent of the floating element : after{content: ""; Display:block;clear:both;} * * Under ie6,7 the parent of the floating element has width without clearing the float haslayout the width and height of the element is recalculated based on the size of the element's content or the parent's size &nbs P Display:inline-block Height: (any value except Auto) float: (left or right) width: (any value except Auto) Zoom: (except No Rmal any value) /</style> </head> <body> <div class= "box clear" > <div class= "D IV "></div> </div> </body> </html> 6. Add Overflow:auto to the floating element parent; Code as follows: <! DOCTYPE html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style>. box{width:300px;border:1px solid #000; overflow: Auto;} . div1{width:260px;height:400px;background:red;float:left;} </style> </head> <body> <div class= "Box" >   <div class= "Div1" ></div> </div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
