1. Why clear the float ?
The principle of floating is to let the picture leave the document flow and float directly on the desktop . When we generally layout, we only set the width but not the height, and let the content automatically fill the height. However, after using float , the height of the original filling will disappear, and the height of the parent element will be 0. Subsequent addition of content layout will cause confusion and cause height collapse . At this time, clear float can be used to solve the problem of parent element height collapse .
-
<style>
-
*{
-
margin:
0;
-
padding:
0;
-
}
-
.box1{
-
width:
100px;
-
height:
100px;
-
background-color: pink;
-
}
-
.box2{
-
width:
80px;
-
height:
80px;
-
background-color: skyblue;
-
}
-
</style>
-
-
-
<div class="box1">1
</div>
-
<div class="box2">2
</div>
Taking the above code as an example, by default, its display effect is as follows:
Now add a float: left to box 1, and let's see what happens:
We can see that the No. 2 box is missing on the desktop, so what is the reason? The reason is that the No. 1 box has floated up, and the space it originally occupied has been vacant, so the No. 2 box is below the No. 1 box, as shown in the figure shown,
So here is our solution:
2. Solution one (clear)
Add a clear:left to the second box directly. It should be noted here that clear eliminates the influence of the previous box on itself, so we will clear whichever side the previous box floats to. The previous box here is float :left, so we added clear:left to the second box
3. Solution 2 (overflow: hidden)
The overflow attribute needs to be added to the parent element, so we add a parent element to the two boxes. In order to see the height collapse, we add a bottom box, as follows:
-
<style>
-
*{
-
margin:
0;
-
padding:
0;
-
}
-
.box1{
-
width:
100px;
-
height:
100px;
-
background-color: pink;
-
}
-
.box2{
-
width:
80px;
-
height:
80px;
-
background-color: skyblue;
-
}
-
.father{
-
width:
100%;
-
border:
2px solid red;
-
}
-
.bottom{
-
width
: 100%;
-
height:
200px;
-
background-color: green;
-
}
-
</style>
-
-
-
<div class="father">
-
<div class="box1">1
</div>
-
<div class="box2">2
</div>
-
</div>
-
<div class="bottom">3
</div>
This is the default state
Now add floats to boxes 1 and 2, let's see what happens
-
<style>
-
.box1{
-
width:
100px;
-
height:
100px;
-
background-color: pink;
-
float: left;
-
}
-
.box2{
-
width:
80px;
-
height:
80px;
-
background-color: skyblue;
-
float
: left;
-
}
-
</style>
You can see that our bottom box is not in the original position. What is the reason? The reason is that we did not set the height for the parent element at this time. The height of the parent element is completely supported by the No. 1 and No. 2 boxes. Now give 1 The No. 2 box is added with floating, which does not occupy the original position, so the height of the parent element is zero at this time. If it does not occupy the position, the bottom box will go up, causing the height to collapse.
The solution is: add an overflow:hidden to the parent element
-
<style>
-
.father{
-
width:
100%;
-
border:
2px solid red;
-
overflow: hidden;
-
}
-
</style>
-
4. Solution three (add height to the parent element)
The third method is to add a height to the parent element. Note that the height of the parent element must be set greater than the height of the highest box in the child element. In this example, the height of the highest box in the child element is 100px, then the parent element The height must be greater than or equal to 100px
-
<style>
-
.father
{
-
width
: 100%;
-
height:
100px;
-
border:
2px solid red;
-
}
-
</style>
5. Solution four (additional label method)
Add an empty label after the label that needs to be cleared and add clear:both to it
-
<div class="father">
-
<div class="box1">1
</div>
-
<div class="box2">2
</div>
-
<div class="clear">
</div>
-
</div>
-
<div class="bottom">3
</div>
-
<script>
-
.clear{
-
clear: both;
-
}
-
</script>
6. Solution five ( use the after pseudo-element to clear the float )
This method also has a disadvantage, that is, it does not support IE6, IE7
-
<style>
-
.father
:after{
-
content:
"";
-
display: block;
-
height:
0;
-
clear:both;
-
visibility: hidden;
-
}
-
.father{
-
zoom:
1;
-
/*The way IE6 clears the float is only implemented by IE6-IE7, and other browsers do not execute it*/
-
}
-
-
</style>
1. Why clear the float ?
The principle of floating is to let the picture leave the document flow and float directly on the desktop . When we generally layout, we only set the width but not the height, and let the content automatically fill the height. However, after using float , the height of the original filling will disappear, and the height of the parent element will be 0. Subsequent addition of content layout will cause confusion and cause height collapse . At this time, clear float can be used to solve the problem of parent element height collapse .
-
<style>
-
*{
-
margin:
0;
-
padding:
0;
-
}
-
.box1{
-
width:
100px;
-
height:
100px;
-
background-color: pink;
-
}
-
.box2{
-
width:
80px;
-
height:
80px;
-
background-color: skyblue;
-
}
-
</style>
-
-
-
<div class="box1">1
</div>
-
<div class="box2">2
</div>
Taking the above code as an example, by default, its display effect is as follows:
Now add a float: left to box 1, and let's see what happens:
We can see that the No. 2 box is missing on the desktop, so what is the reason? The reason is that the No. 1 box has floated up, and the space it originally occupied has been vacant, so the No. 2 box is below the No. 1 box, as shown in the figure shown,
So here is our solution:
2. Solution one (clear)
Add a clear:left to the second box directly. It should be noted here that clear eliminates the influence of the previous box on itself, so we will clear whichever side the previous box floats to. The previous box here is float :left, so we added clear:left to the second box
3. Solution 2 (overflow: hidden)
The overflow attribute needs to be added to the parent element, so we add a parent element to the two boxes. In order to see the height collapse, we add a bottom box, as follows:
-
<style>
-
*{
-
margin:
0;
-
padding:
0;
-
}
-
.box1{
-
width:
100px;
-
height:
100px;
-
background-color: pink;
-
}
-
.box2{
-
width:
80px;
-
height:
80px;
-
background-color: skyblue;
-
}
-
.father{
-
width:
100%;
-
border:
2px solid red;
-
}
-
.bottom{
-
width
: 100%;
-
height:
200px;
-
background-color: green;
-
}
-
</style>
-
-
-
<div class="father">
-
<div class="box1">1
</div>
-
<div class="box2">2
</div>
-
</div>
-
<div class="bottom">3
</div>
This is the default state
Now add floats to boxes 1 and 2, let's see what happens
-
<style>
-
.box1{
-
width:
100px;
-
height:
100px;
-
background-color: pink;
-
float: left;
-
}
-
.box2{
-
width:
80px;
-
height:
80px;
-
background-color: skyblue;
-
float
: left;
-
}
-
</style>
You can see that our bottom box is not in the original position. What is the reason? The reason is that we did not set the height for the parent element at this time. The height of the parent element is completely supported by the No. 1 and No. 2 boxes. Now give 1 The No. 2 box is added with floating, which does not occupy the original position, so the height of the parent element is zero at this time. If it does not occupy the position, the bottom box will go up, causing the height to collapse.
The solution is: add an overflow:hidden to the parent element
-
<style>
-
.father{
-
width:
100%;
-
border:
2px solid red;
-
overflow: hidden;
-
}
-
</style>
-
4. Solution three (add height to the parent element)
The third method is to add a height to the parent element. Note that the height of the parent element must be set greater than the height of the highest box in the child element. In this example, the height of the highest box in the child element is 100px, then the parent element The height must be greater than or equal to 100px
-
<style>
-
.father
{
-
width
: 100%;
-
height:
100px;
-
border:
2px solid red;
-
}
-
</style>
5. Solution four (additional label method)
Add an empty label after the label that needs to be cleared and add clear:both to it
-
<div class="father">
-
<div class="box1">1
</div>
-
<div class="box2">2
</div>
-
<div class="clear">
</div>
-
</div>
-
<div class="bottom">3
</div>
-
<script>
-
.clear{
-
clear: both;
-
}
-
</script>
6. Solution five ( use the after pseudo-element to clear the float )
This method also has a disadvantage, that is, it does not support IE6, IE7
-
<style>
-
.father
:after{
-
content:
"";
-
display: block;
-
height:
0;
-
clear:both;
-
visibility: hidden;
-
}
-
.father{
-
zoom:
1;
-
/*The way IE6 clears the float is only implemented by IE6-IE7, and other browsers do not execute it*/
-
}
-
-
</style>