[前端知识点]css清除浮动
清除浮动概念
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象,这个现象叫浮动溢出。
为了防止这个现象的出现而进行的CSS处理,就叫清除浮动。
具体表现如下:
- 左、右盒子没有float属性,可以撑开父盒子(红色边框)
- 加了float属性后,左、右盒子脱离文档流,且父盒子变为一条线,没有包围子盒子
再联系开头解释,可以理解浮动和清除浮动问题
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
border: 2px solid red;
width: 310px;
}
.left{
background: green;
float: left;
height: 200px;
width: 200px;
}
.right{
background: blue;
float: left;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
以下将介绍较为推荐的清除浮动的三个方法:
- clear:both
- overflow
- :after伪元素
一、使用clear:both清除浮动
在浮动盒子后放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响
优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护
<body>
<div class="main">
<div class="left">左</div>
<div class="right">右</div>
<div style="clear: both"></div>
</div>
</body>
二、使用overflow属性
给父元素设置overflow样式,可以是overflow:hidden或overflow:auto
本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果
.main{
overflow: hidden;
border: 2px solid red;
width: 310px;
}
三、使用伪元素after清除浮动
给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
.main{
border: 2px solid red;
width: 310px;
}
.main:after{
content:"";
display:block;
clear:both;
}
如果还有其他推荐方法,欢迎大家私信或评论区给出建议