Why clear the float
Usually we usually use float in the page layout. Although float is convenient and easy to use, it will always bring a certain impact, such as the problem of height collapse. Normally, only the width is set in the parent element, but the height is not set. When the height is supported by the child element, when the child element is set to float, the child element will leave the document flow, and its parent element cannot be supported by the child element, which leads to a height collapse; and the height of the parent element collapses , Will cause the elements under the parent element to move up, so the layout we arranged before may cause confusion, the following is explained by code:
.father{
width: 400px;
border: 10px solid firebrick;
background-color: aqua;
}
.box1{
width: 150px;
height:80px;
background-color: chocolate;
}
.box2{
width: 10opx;
height: 60px;
background-color: darkslateblue;
} <!-- 盒子布局 -->
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>Effect picture:
<!-- 盒子设置左浮动 -->
.box1,.box2{
float: left;
}
The effect after setting:
Obviously the height of the father box has collapsed, only the border can be seen here, and box1 and box2 have also moved upward.
Several common ways to clear floats
Method 1: Use the after pseudo-element to clear the float, the code is as follows:
.clearfix::after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
.clearfix{
zoom: 1;
/* 由于IE6和IE7不支持伪元素，使用zoom:1可清除浮动 */ } <div class="father clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>The effect of clearing the float:
This method is the most commonly used and the best used. Normally, when we are working on a project, we will write these lines of code in the reset style, which is convenient for us to use to clear the float. , To avoid layout confusion, floating in the page layout is also used a lot.
Method 2:
Add an empty element behind the floating box to clear the float
<div class="father clearfix">
<div class="box1"></div>
<div class="box2"></div>
<p class="p1"></p>
</div> .p1{
clear: both;
}We rarely use this method, adding a non-semantic element, making the page layout code not concise enough.
Method 3:
Add overflow: hidden in the style of the parent element
.father{
width: 400px;
border: 10px solid firebrick;
background-color: aqua;
overflow: hidden;
}Although this method can clear the float, it is easy to hide the overflowed elements if you do not set the automatic wrapping of the text, so it is rarely used in normal times.
Method 4:
Give the parent element a height. At the beginning, we have already mentioned that the reason for the collapse is that the height of the parent element cannot be stretched. Then we can solve the problem by giving a height.
Supplement: Sometimes we clear the float may not be due to the height collapse problem, sometimes we may use clear:left, clear:right, clear:both and other styles, sometimes we should set the float for the same class name, and change the original Elements that do not need to be floated are also floated, and can be cleared in this way.