1. Parent element Definition Height
<span style= "Font-family:microsoft Yahei;" ><style>
. wrapper {
width:600px;
height:200px;/* Resolution Code * *
background:red;
}
. Left {
Float:left;
width:30%;
height:100px;
Background:yellow;
}
. Right {
Float:right;
width:30%;
height:100px;
Background:green;
}
</style>
<div class= "wrapper" >
<div class= "Left" >
Ghost Eye Evil God Blog
</div>
<div class= "Right" >
Ghost Eye Evil God Blog
</div>
</div></span>
Principle: Manually define the height of the parent element to solve the problem of its inability to get the height automatically.
Disadvantage: Must be given a precise height, can not be adaptive.
2. Clear float with empty label
<span style= "Font-family:microsoft Yahei;" ><style>
. wrapper {
width:600px;
background:red;
}
. Left {
Float:left;
width:30%;
height:100px;
Background:yellow;
}
. Right {
Float:right;
width:30%;
height:100px;
Background:green;
}
/* Resolve Code * *
. Clear {
Clear:both;
}
</style>
<div class= "wrapper" >
<div class= "Left" >
Ghost Eye Evil God Blog
</div>
<div class= "Right" >
Ghost Eye Evil God Blog
</div>
<div class= "Clear" >
</div>
</div></span>
Principle: Add an empty label before the closing tag of the parent element and use Clear:both to clear the float.
Disadvantage: If you need to clear a lot of floating place, you need to add a lot of empty tags, very troublesome.
3. Parent element Settings Overflow:hidden
<span style= "Font-family:microsoft Yahei;" ><style>
. wrapper {
width:600px;
background:red;
Overflow:hidden;
}
. Left {
Float:left;
width:30%;
height:100px;
Background:yellow;
}
. Right {
Float:right;
width:30%;
height:100px;
Background:green;
}
</style>
<div class= "wrapper" >
<div class= "Left" >
Ghost Eye Evil God Blog
</div>
<div class= "Right" >
Ghost Eye Evil God Blog
</div>
</div></span>
Rationale: You must define a width or zoom:1, and you cannot define height, and using Overflow:hidden has the effect of clearing the internal float.
Disadvantage: When used with position, it may cause content to be hidden.
4. Parent element definition Pseudo class: After
<span style= "Font-family:microsoft Yahei;" ><style>
. wrapper {
width:600px;
background:red;
}
/* Resolve Code * *
. wrapper:after {
Display:block;
Clear:both;
Overflow:hidden;
Content: ';
height:0;
Visibility:hidden;
}
. Left {
Float:left;
width:30%;
height:100px;
Background:yellow;
}
. Right {
Float:right;
width:30%;
height:100px;
Background:green;
}
</style>
<div class= "wrapper" >
<div class= "Left" >
Ghost Eye Evil God's blog, address
</div>
<div class= "Right" >
Ghost Eye Evil God's blog, address
</div>
</div></span>
Principle: Use: After Pseudo class after the floating block plus a display:none invisible block content, and give it set Clear:both to clean up the float.
5. Parent element Definition Overflow:auto
<span style= "Font-family:microsoft Yahei;" ><style>
. wrapper {
width:600px;
background:red;
overflow:auto;/* Resolution Code * *
}
. Left {
Float:left;
width:30%;
height:100px;
Background:yellow;
}
. Right {
Float:right;
width:30%;
height:100px;
Background:green;
}
</style>
<div class= "wrapper" >
<div class= "Left" >
Ghost Eye Evil God Blog
</div>
<div class= "Right" >
Ghost Eye Evil God Blog
</div>
</div></span>
Rationale: You must define width or zoom:1, and you cannot define height, and when you use Overflow:auto, the browser automatically checks the height of the floating area
Disadvantage: Scroll bars appear when content exceeds the width of the parent element.
6. Parent element Set Float property
<span style= "Font-family:microsoft Yahei;" ><style>
. wrapper {
width:600px;
background:red;
float:left;/* Resolution Code * *
}
. Left {
Float:left;
width:30%;
height:100px;
Background:yellow;
}
. Right {
Float:right;
width:30%;
height:100px;
Background:green;
}
</style>
<div class= "wrapper" >
<div class= "Left" >
Ghost Eye Evil God Blog
</div>
<div class= "Right" >
Ghost Eye Evil God Blog
</div>
</div></span>