为什么需要清除浮动呢？
相信大家很好奇，为什么需要清除浮动？ 清除浮动主要是为了清除浮动带来的影响 在标准流的情况下 子元素的高度是可以撑开父元素的，一旦子元素浮动 那么父元素就检测不到子元素了,从而导致父元素高度为0，那么此时我们就需要清除浮动 让子元素可以把父亲撑开 就如下面这种情况：
<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>
* {
margin: 0;
padding: 0;
}
.dad {
width: 600px;
border: 3px solid #000;
}
.boy {
float: left;
width: 100px;
height: 200px;
background-color: skyblue;
}
.girl {
float: right;
width: 100px;
height: 100px;
background-color: pink;
}
.daye {
width: 800px;
height: 400px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="dad">
<div class="boy">男孩</div>
<div class="girl">女孩</div>
</div>
<div class="daye"></div>
</body>
</html>
！！！！若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法。
清除浮动主要有哪几种方法呢？
- 1.额外标签法(不推荐)：主要是在浮动元素的末尾添加一个空标签。并且给该元素添加style='clear:both'属性 ===>
clear:both 清除浮动
<html lang="zh-CN">
<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>
* {
margin: 0;
padding: 0;
}
.dad {
/* height: 300px; */
width: 600px;
border: 3px solid #000;
}
.boy {
float: left;
width: 100px;
height: 200px;
background-color: skyblue;
}
.girl {
float: right;
width: 100px;
height: 300px;
background-color: deeppink;
}
.daye {
width: 700px;
height: 400px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="dad">
<div class="boy"></div>
<div class="girl"></div>
<div style="clear: both"></div>
</div>
<div class="daye"></div>
</html>
- 2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐): 在不给高的情况下 给父元素设置overflow:hidden 清除浮动
<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>
* {
margin: 0;
padding: 0;
}
.dad {
overflow: hidden;
width: 600px;
border: 3px solid #000;
}
.boy {
float: left;
width: 100px;
height: 200px;
background-color: skyblue;
}
.girl {
float: right;
width: 100px;
height: 300px;
background-color: deeppink;
}
.daye {
width: 700px;
height: 400px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="dad">
<div class="boy"></div>
<div class="girl"></div>
</div>
<div class="daye"></div>
</body>
</html>
- 3.使用before和after双伪元素清除浮动
<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>
* {
margin: 0;
padding: 0;
}
.dad {
width: 600px;
height: 400px;
border: 3px solid #000;
}
.boy {
float: left;
width: 100px;
height: 200px;
background-color: skyblue;
}
.girl {
float: right;
width: 100px;
height: 300px;
background-color: deeppink;
}
.daye {
width: 700px;
height: 400px;
background-color: aquamarine;
}
/* 添加如下代码即可 */
.clearfix::before {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="dad clearfix">
<div class="boy"></div>
<div class="girl"></div>
</div>
<div class="daye"></div>
</body>
</html>
- 4.使用after伪元素清除浮动(推荐使用)
<html lang="zh-CN">
<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>
</head>
<body>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.dad {
width: 600px;
border: 3px solid #000;
}
.boy {
float: left;
width: 100px;
height: 200px;
background-color: skyblue;
}
.girl {
float: right;
width: 100px;
height: 300px;
background-color: deeppink;
}
.daye {
width: 700px;
height: 400px;
background-color: aquamarine;
}
/* 谁因为浮动没有高度了 就把这个类名clearfix给谁 */
.cleatfix:after {
content: '1';
/* 变为块元素 */
display: block;
/* */
clear: both;
/* 让高为0 */
height: 0;
/* 隐藏元素 可以吧content 里的内容隐藏了 */
visibility: hidden;
}
/* clearfix清除浮动 */
.cleatfix {
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
*zoom: 1;
}
</style>
</head>
<body>
<!-- 添加假标签(伪元素)清除浮动 -->
<div class="dad cleatfix">
<div class="boy"></div>
<div class="girl"></div>
</div>
<div class="daye"></div>
</body>
</html>
