Home > Developer > Web Develop
Method of clearing floating: Common 5th Type
1th: Also floating to the parent (this case when the parent margin:0 auto; not centered
<! DOCTYPE html>
<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;}
/*
Clear float
1. Add a float to the parent (not centered)
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
</div>
</body>
The 2nd type: Add Display:inline-block to the parent; (same as Method 1, not centered.) Only ie6,7 Center)
<! DOCTYPE html>
<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;}
/*
Clear float
1. Add a float to the parent level
2. Add Display:inline-block to the parent level
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
</div>
</body>
3rd add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;} However, under IE6, the block element has a minimum height, that is, when height<19px, the default is 19PX, the solution: font-size:0; or Overflow:hidden;
<! DOCTYPE html>
<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;}
. clear{Height:0px;font-size:0;clear:both;}
/*
Clear float
1. Add a float to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
<div class= "Clear" ></div>
</div>
</body>
4th add <br clear= "All" under floating elements >
<! DOCTYPE html>
<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;}
/*
Clear float
1. Add a float to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}
4. Add <br clear= "All" under floating elements/>
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
<BR clear= "All"/>
</div>
</body>
The 5th kind. Add {zoom:1 to the floating element parent;}
<! DOCTYPE html>
<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 level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}
4. Add <br clear= "All" under floating elements/>
5. Add {zoom:1 to the parent of the floating element;}
: after{content: ""; Display:block;clear:both;}
* * The parent of the floating element under ie6,7 does not have to be clear floating
Haslayout calculates the width of an element based on the size of the content of the element or the size of the parent's parent
Display:inline-block
Height: (any value except Auto)
float: (left or right)
Width: (any value except Auto)
Zoom: (any value except normal)
*/
</style>
<body>
<div class= "box Clear" >
<div class= "Div" ></div>
</div>
</body>
Examples of 6 ways HTML clears floats
Font: [Increase decrease] Type: Reprint time: 2013-11-15 I want to comment
This article describes 6 ways to clear the floating HTML elements for everyone to refer to the use, see below
.. What happens when you use Display:inline-block:
1. Make the block elements appear on one line
2. Make the inline support wide and high
3. Line break is parsed
4. When not set, the width is open by the content
5. Next Step support block label in ie6,7
Because the Inline-block property is parsed (with gaps) when wrapping, the solution uses floating float:left/right
What happens when you use a float:
1. Make the block elements appear on one line
2. Enable inline elements to support wide height
3. Width is open by content when not set to width height
4. Line breaks are not parsed (so the method of clearing gaps when using inline elements can use float)
5. The element adds a float that moves away from the document stream, moving in a specified direction until it touches the parent's boundary or another floating element stops (the document flow is the position in the document where the object can be displayed in the arrangement)
Copy the code code as follows:
<! DOCTYPE html>
<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. Make the block elements appear on one line
2. Make the inline support wide and high
3. Line break is parsed
4. Width is not set when width is open by content
5. Block labels are not supported under ie6,7
Floating:
1. Make the block elements appear on one line
2. Make the inline support wide and high
3. Width is not set when width is open by content
*/
</style>
<body>
<div class= "Div1" >div1</div>
<div class= "Div2" >div2</div>
<span class= "Span1" >span1</span>
<span class= "Span2" >span2</span>
</body>
The following code is only box1 floating, then box1,box2 overlaps together. They don't overlap when they float.
Copy the code code as follows:
<! DOCTYPE html>
<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>
<body>
<div class= "Box1" ></div>
<div class= "Box2" ></div>
</body>
The method of clearing float:
1. Also add a float to the parent (this case when the parent margin:0 auto; not centered)
Copy the code code as follows:
<! DOCTYPE html>
<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;}
/*
Clear float
1. Add a float to the parent (not centered)
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
</div>
</body>
2. Add Display:inline-block to the parent; (same as Method 1, not centered.) Only ie6,7 Center)
Copy the code code as follows:
<! DOCTYPE html>
<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;}
/*
Clear float
1. Add a float to the parent level
2. Add Display:inline-block to the parent level
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
</div>
</body>
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;} However, under IE6, the block element has a minimum height, that is, when height<19px, the default is 19PX, the solution: font-size:0; or Overflow:hidden;
Copy the code code as follows:
<! DOCTYPE html>
<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;}
. clear{Height:0px;font-size:0;clear:both;}
/*
Clear float
1. Add a float to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
<div class= "Clear" ></div>
</div>
</body>
4. Add <br clear= "All" under floating elements >
Copy the code code as follows:
<! DOCTYPE html>
<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;}
/*
Clear float
1. Add a float to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}
4. Add <br clear= "All" under floating elements/>
*/
</style>
<body>
<div class= "box" >
<div class= "Div" ></div>
<BR clear= "All"/>
</div>
</body>
5. Add {zoom:1 to the floating element parent;}
: after{content: ""; Display:block;clear:both;}
Copy the code code as follows:
<! DOCTYPE html>
<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 level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}
4. Add <br clear= "All" under floating elements/>
5. Add {zoom:1 to the parent of the floating element;}
: after{content: ""; Display:block;clear:both;}
* * The parent of the floating element under ie6,7 does not have to be clear floating
Haslayout calculates the width of an element based on the size of the content of the element or the size of the parent's parent
Display:inline-block
Height: (any value except Auto)
float: (left or right)
Width: (any value except Auto)
Zoom: (any value except normal)
*/
</style>
<body>
<div class= "box Clear" >
<div class= "Div" ></div>
</div>
</body>
The 6th kind. Add Overflow:auto to the floating element parent;
<! DOCTYPE html>
<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>
<body>
<div class= "box" >
<div class= "Div1" ></div>
</div>
</body>
This article is from the "LV field" blog, so be sure to keep this source http://lvning.blog.51cto.com/4555967/1895867
CSS clear floating first some methods
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
