前言：
搞前端的必会的知识点之清除浮动，工作中必用到，面试中必考到，废话不多说直接上干货！
清除浮动的办法：
父级元素定义高度
实现原理：
- 直接给父级元素定义height，解决父级没有高度问题
- 优点：容易理解，代码少
- 缺点：布局必须高度固定，且高度必须精确，否则一旦子级元素高出父级，会导致布局问题
- 结论：局限太大，一般不建议使用，建议固定高度布局使用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
width: 40%;
margin: 0 auto;
/*关键代码！！！！*/
height: 200px;
}
.div2 {
background: #800080;
border: 1px solid red;
width: 40%;
margin: 0 auto;
height: 100px;
margin-top: 10px
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>额外标签法(clear:both)
实现原理：
- 在需要清除浮动的元素里边添加一个div，利用 clear:both来清除浮动，让父级获取到高度
- 优点：简单，容易实现
- 缺点：增加额外的元素
- 建议：不太推荐使用，多了很多无意义的标签，页面复杂以后，影响性能
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
/*清除浮动代码*/
.clearfloat {
clear: both
}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<!-- 清除浮动用的元素 -->
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
</body>
</html>父级元素定义 伪类:after 和 zoom
实现原理：
- 实现思路和 额外标签法类似，但是增加了 zoom代码解决 IE6，IE7的浮动问题
- 优点：浏览器基本上都支持，大厂使用，品质有保证
- 缺点：代码稍显多
- 建议：推荐使用，定义成公共样式
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
<style type="text/css">.div1 {
background: #000080;
border: 1px solid red;
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
/*清除浮动代码*/
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
.clearfloat {
zoom: 1
}
</style>
</style>
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>父级元素定义 overflow:hidden，触发BFC
实现原理：
- 定义元素宽度，或者 使用 zoom:1代码，再使用overflow:hidden的时候，浏览器自动获取浮动区域高度
- 优点：简单易实现
- 缺点：不能使用position定位，同时可能会对内容进行裁剪
- 建议：不方便使用positon，所以不太建议使用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
/*解决代码*/
width: 98%;
overflow: hidden
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px;
width: 98%
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>父级元素定义 overflow:auto，触发BFC
实现原理：
- 定义元素宽度，或者 使用 zoom:1代码，再使用overflow:hidden的时候，浏览器自动获取浮动区域高度
- 优点：简单易实现
- 缺点：内部宽高超过父级，会出现滚动条
- 建议：不建议使用，除非确定内容出现滚动条不会影响整体页面效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
/*解决代码*/
width: 98%;
overflow: auto
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px;
width: 98%
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>父级元素 也一起浮动
实现原理：
- 大家都浮动，不就又是一家人了吗!
- 优点：不存在
- 缺点：父级元素如果浮动产生问题，还得解决浮动问题
- 建议：不推荐使用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
/*解决代码*/
width: 98%;
margin-bottom: 10px;
float: left
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
width: 98%;
/*解决代码*/
clear: both
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
感谢观看，如果对于上边内容有疑问，请直接评论区回复！