前言:
搞前端的必会的知识点之清除浮动,工作中必用到,面试中必考到,废话不多说直接上干货!
清除浮动的办法:
父级元素定义高度
实现原理:
- 直接给父级元素定义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>
感谢观看,如果对于上边内容有疑问,请直接评论区回复!