有人可能会说,现在谁还去用浮动呢,都去用flex布局去了. 可是我们对于这些知识点依然不能忘记,在这里小小复习一下.
为什么要清除浮动呢?
相信大家很好奇，为什么需要清除浮动？ 清除浮动主要是为了清除浮动带来的影响 在标准流的情况下 子元素的高度是可以撑开父元素的，一旦子元素浮动 那么父元素就检测不到子元素了,从而导致父元素高度为0，那么此时我们就需要清除浮动 让子元素可以把父亲撑开 就如下面这种情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
border: 1px solid black;
}
.sonFirst {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.sonSecond {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<div class="father">
<div class="sonFirst"></div>
<div class="sonSecond"></div>
</div>
<div class="box"></div>
<body>
</body>
</html>
牢记: 一浮全浮,不然会影响页面其他的布局
那么清除浮动的方法有哪些呢?
方法一 额外标签法
额外标签法：主要是在父元素的末尾添加一个块级元素。并且给该元素添加style='clear:both'属性 ===>clear:both 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
border: 1px solid black;
}
.sonFirst {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.sonSecond {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<div class="father">
<div class="sonFirst"></div>
<div class="sonSecond"></div>
<div style="clear: both;"></div>
</div>
<div class="box"></div>
<body>
</body>
</html>
方法二 父元素添加overflow属性(父元素添加overflow:hidden):
在不给高的情况下 给父元素设置overflow:hidden 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
overflow: hidden;
width: 500px;
border: 1px solid black;
}
.sonFirst {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.sonSecond {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<div class="father">
<div class="sonFirst"></div>
<div class="sonSecond"></div>
</div>
<div class="box"></div>
<body>
</body>
</html>
方法三和四 单伪和双伪元素法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
border: 1px solid black;
}
.sonFirst {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.sonSecond {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
/* 添加的代码 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/* 或者双伪元素法*/
/* 添加的代码 */
/* .clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.claerfix{
*zoom:1;
} */
</style>
</head>
<div class="father clearfix">
<div class="sonFirst"></div>
<div class="sonSecond"></div>
</div>
<div class="box"></div>
<body>
</body>
</html>
注意:只需要给父元素添加一个类名 clearfix就可.
