清除浮动的4种方式
为什么要清除浮动
浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。由于浮动 元素不占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在 该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响。
清除浮动本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们了来影响其他元素。 在CSS 中，clear属性用于清除浮动，其基本语法格式如下：
选择器 { clear: 属性值；}
| 属性值 | 描述 |
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
1. 额外标签法
在最后一个浮动的后面，新添加一个标签，清除浮动。清除浮动后，父盒子自动检测子盒子的高度，以 最高的为准。
<!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>
.father {
border: 1px solid #ccc;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: red;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div> <!--在最后一个浮动标签的后面，添加一个标签，清除浮动 -->
</div>
<div class="footer"></div>
</body>
</html>
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差
2.父级添加overflow属性方法
可以为父级添加：overflow: hidden;
<!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>
.father {
border: 1px solid blue;
width: 300px;
overflow: hidden;
}
.big {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
别加错位置，给父盒子加，不是所有的浮动都需要清除，谁影响布局，清除谁。
3.使用:after伪元素清除浮动
:after方式为空元素的升级版，好处是不用单独加标签。
<!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>
/* 正常浏览器清除浮动 */
.clearfix:after {
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* zoom 1 就是ie6 清除浮动方式 *表示ie7以下的版本所识别 */
.clearfix {
*zoom: 1;
}
.father {
border: 1px solid blue;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father clearfix"><!-- 哪个元素要清除浮动，在class后调用clearfix-->
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
4.使用before和after双伪元素清除浮动
<!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>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.father {
border: 1px solid blue;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: yellow;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>