What will happen when you use Display:inline-block:
1. Make block elements appear on one line
2. Make the embedded support wide and high
3. Line-wrapping was parsed.
4. When not set width from the content of the distraction
5. Support Block label in ie6,7 next step
The solution uses a floating float:left/right because the Inline-block property is parsed (with gaps) when it wraps.
What happens when you use a float:
1. Make block elements appear on one line
2. Enable the embedded elements to support the wide height
3. Do not set the width of the height from the content of the Open
4. Line break is not resolved (so the use of inline elements when clearing the clearance method can be used floating)
5. The element adds a float that moves out of the document stream, moving in one direction specified until the boundary of the parent is encountered or another floating element stops (the document flow is the position in the document where the object is displayed in the arrangement).
Copy 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 block elements appear on one line
2. Make the embedded support wide and high
3. Line-wrapping was parsed.
4. Width is not set width by the content of the distraction
5. Block labels are not supported under ie6,7
Floating:
1. Make block elements appear on one line
2. Make the embedded support wide and high
3. Width is not set width by the content of the distraction
*/
</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 only box1 float, then box1,box2 overlap together. They both float and they don't overlap.
Copy 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 to the parent level (this case when the parent margin:0 auto; not centered)
Copy 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. Also 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 Method 1, not centered.) Only ie6,7 centered)
Copy 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. Also add floating 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 element ></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;
Copy 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. Also add floating to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating element ></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 element >
Copy 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. Also add floating to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating element ></div>
. clear{Height:0px;font-size:0;clear:both;}
4. Add <br clear= "All" under the floating element/>
*/
</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 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. Also add floating to the parent level
2. Add Display:inline-block to the parent level
3. Add <div class= "clear" under floating element ></div>
. clear{Height:0px;font-size:0;clear:both;}
4. Add <br clear= "All" under the floating element/>
5. Add {zoom:1 to the parent of the floating element;}
: after{content: ""; Display:block;clear:both;}
* * The parent of a floating element has a width without a clear float under ie6,7
Haslayout compute the width of an element based on the size of the element's content or the parent of the parent level
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>
6. Add Overflow:auto to the floating element parent;
Copy 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;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>
