Foreword:
In non-IE browsers (such as Firefox), when the height of the container is auto and there are floating (float is left or right) elements in the content of the container, in this case, the height of the container cannot be automatically extended In order to adapt to the height of the content, the content overflows outside the container and affects (or even destroys) the layout. This phenomenon is called floating overflow. The CSS processing to prevent this phenomenon is called CSS Clear Float.
Clearing the float is mainly to solve the problem of the internal height collapse of the parent element due to the floating of the child element.
Why use float?
At the beginning, the floating is just to solve the problem of text wrapping around the picture, but in the end it is to solve the problem of displaying several block-level elements side by side, although you can use the display of defining block-level elements to be inline-block (this way will not appear the parent element Collapse problem) But this method can not control the position of the element but from left to right by default, so it is more convenient to use float to realize whether the element is left or right. However, if the float is not cleared after the float is used, the parent height collapse problem will occur.
Examples:
HTML code basic code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
#parent{
border: 1px solid black;
}
#child{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
Effect Picture ----- Uncleared Floating
Effect Picture ----- Cleared Floating
When the float is set for the child element, if the float is not cleared, the parent element will collapse in height. So when we set up float, we must resolve the impact of float. Now we will introduce several ways to clear floats!
Method 1: Extra labeling method
For whom to clear the float, add an additional blank label after it and set clear: both.
Advantages: easy to understand and easy to write.
Disadvantages: Many meaningless tags are added, and the structure is relatively poor.
clear: both: The essence is to close the float, that is, let the parent box close the exit and entrance, and prevent the child box from coming out.
css style
#clear{
clear: both;
}
html code
<div id="parent">
<div id="child"></div>
<!-- 方法一 额外标签法 -->
<div id="clear"></div>
</div>
Method 2: Add overflow: hidden to the parent element
By triggering the BFC method, the floating is cleared
Advantages: concise code
Disadvantages: When the content increases, it is easy to cause the content to be hidden without automatic line wrapping, and it is impossible to display the elements to overflow.
css style
#parent{
overflow: hidden;
}
Method 3: Use the after pseudo-element to clear the float
Advantages: In line with the closed floating idea, the structure is semantically correct.
Disadvantages: ie6-7 does not support pseudo-element: after, use zoom:1 to trigger hasLayout.
css style
#parent:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
#parent{
/* 触发 hasLayout */
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
Method 4: Use before and after double pseudo-elements to clear the float
Advantages: the code is more concise
Disadvantage: Use zoom:1 to trigger hasLayout.
css style
#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
clear: both;
}
#parent{
*zoom: 1;
}
Method five: set the height for the parent element
Disadvantages: You need to add the height manually. If the height changes later, you need to modify the height again, which will cause trouble for later maintenance.
Advantages: Simple and rude, direct and effective, eliminating the impact of floating.