清除浮动的四种方法
为什么要清楚浮动?
浮动效果是浮起来的,它原来的地方是不占位的。所以当一个盒子中只装浮动元素时,该盒子需要有height属性,否则该盒子只是一条线,后面的元素会出现在浮动元素的下层。而有些情况无法知道盒子的具体height,我们希望盒子能够根据内容自动调整height。所以需要清除浮动。
下面代码为添加清除浮动前后代码。(通过鼠标悬停于盒子上显示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style>
.box {
width: 800px;
border: 2px solid skyblue;
margin: 0 auto;
}
.one {
float: left;
width: 300px;
height: 200px;
background-color: mediumpurple;
}
.two {
float: left;
width: 200px;
height: 200px;
background-color: seagreen;
}
.footer {
height: 300px;
width: 800px;
background-color: cornflowerblue;
border: 2px solid rgb(93, 80, 209);
margin: 0 auto;
}
.box:hover {
overflow: hidden;
/*添加此句*/
}
</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
</div>
<div class="footer">我是页脚。</div>
</body>
</html>
1.额外标签法
在浮动元素的末尾添加一个空标签。缺点:破坏html结构。
<div style="clear: both"></div>
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style>
.box {
width: 800px;
border: 2px solid skyblue;
margin: 0 auto;
}
.one {
float: left;
width: 300px;
height: 200px;
background-color: mediumpurple;
}
.two {
float: left;
width: 200px;
height: 200px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
2.父级添加overflow
overflow的缺点:无法显示溢出部分。如果有盒子溢出,会把溢出的那一部分切掉。
在css样式中添加:
overflow: hidden;
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style>
.box {
width: 800px;
border: 1px solid skyblue;
margin: 0 auto;
}
.one {
float: left;
width: 300px;
height: 200px;
background-color: mediumpurple;
}
.two {
float:left;
width: 200px;
height: 200px;
background-color: seagreen;
}
.box:hover {
overflow: hidden; /*添加此句*/
}
</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
</html>
3.父级添加:after伪元素
通过:after伪元素在浮动块后面添加了一个新盒子。
为父级添加如下代码:
.clearfix:after {
/* 必须有content属性 */
content: "";
/* 将content转换为块级元素 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有,因为IE6、7不兼容上面代码 */
*zoom: 1;
}
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style>
.clearfix:after {
/* 必须有content属性 */
content: "";
/* 将content转换为块级元素 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有,因为IE6、7不兼容上面代码 */
*zoom: 1;
}
.box {
width: 800px;
border: 2px solid skyblue;
margin: 0 auto;
}
.one {
float: left;
width: 300px;
height: 200px;
background-color: mediumpurple;
}
.two {
float: left;
width: 200px;
height: 200px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
</html>
3.为父级添加双伪元素浮动
在浮动块前后各插入一个盒子。
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
border: 2px solid skyblue;
margin: 0 auto;
}
.one {
float: left;
width: 300px;
height: 200px;
background-color: mediumpurple;
}
.two {
float: left;
width: 200px;
height: 200px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
</html>