Why clear floats?
(Clearing the float is mainly to solve the problem of the internal height of the parent element being 0 caused by the floating of the child element)
1. As follows, I set a boder for the parent box, and put two boxes inside, a big and a small. If no float is set for big and small, they will open the parent box by default
2. When I add float attributes to the inner two boxes
The dark blue box at the top will come up, and then the parent box will become a line because there is no height set, and big and small have floated
in conclusion:
-
When the parent element does not give height,
-
When the internal elements are not floating, they will spread
-
When floating, the parent element becomes a line
At this time, many people will think of the new label clear: both and float methods, but these two methods are not recommended!
What is clear: both
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
Ways to clear floats (4 most commonly used)
1. Extra labeling method
(After the last floating label, add a new label and set clear: both;) (not recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.footer{
width: 900px;
height: 100px;
background: darkslateblue;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
</html>
at this time
If we clear the float, the parent element automatically detects the highest height of the child box, and then the same height.
Advantages: easy to understand and convenient
Disadvantages: adding meaningless tags, poor semantics
Not recommended for use.
2. Add the overflow attribute to the parent
(Add overflow: hidden to the parent element) (not recommended)
By triggering the BFC method, the float is cleared
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
Advantages: simple code
Disadvantages: When the content increases, it is easy to cause the content to be hidden without automatic line wrapping, and the elements to overflow cannot be displayed
Not recommended
3. Use the after pseudo-element to clear the float (recommended)
.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: " ";/* content中包含的空格也能生效，旧版本Opera浏览器中有个隐藏的bug，需要添加一个空格字符才能解决 */
display: block;
clear:both;
/*
下面两个属性取消后，也可以清除浮动。
我个人理解如下，为了保证after不在界面显示，所以使用了下方属性。
*/
height: 0;/* 高度为0，隐藏元素 */
visibility: hidden;/* 元素隐藏，原位置还在 */
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
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.
Recommended Use
4. Use before and after double pseudo elements to clear floats (recommended)
/* 提示：当我们不想要外边距折叠（重叠取最大值）时，这个版本的清除浮动非常有效 */
.clearfix:after,.clearfix:before{
content: " ";/* content中包含的空格也能生效，旧版本Opera浏览器中有个隐藏的bug，需要添加一个空格字符才能解决 */
/* 外边距无法通过单元格元素折叠 */
display: table;/* 防止伪元素外边距折叠 */
}
/* 只有after伪元素需要清除浮动 */
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
Advantages: the code is more concise
Disadvantages: Use zoom:1 to trigger hasLayout.
This article is reprinted by other bloggers. If there is any infringement, please contact to delete the
source of reprint: https://blog.csdn.net/h_qingyi/article/details/81269667
Description : Part of the original content, I have deleted and added (Reference book: In-depth analysis of CSS).