css清除浮动的两种常用方式(一)
1 使用一个没有宽高的类名为clear的div来清除
- 1 没有清除浮动前(下方的橙色div直接窜到上边)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试清除浮动</title>
<style>
div {
height: 100px;
width: 100px;
margin: 10px;
background-color: lightskyblue;
}
.box {
float: left;
}
.clear {
/*前三行只是覆盖前边的样式*/
height: 0px;
width: 0px;
margin: 0px;
clear: both;
}
.last {
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<!--<div class="clear"></div>-->
<div class="last"></div>
</body>
</html>
- 2 使用了一个类名为clear的宽高为0的div清除浮动后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试清除浮动</title>
<style>
div {
height: 100px;
width: 100px;
margin: 10px;
background-color: lightskyblue;
}
.box {
float: left;
}
.clear {
/*前三行只是覆盖前边的样式*/
height: 0px;
width: 0px;
margin: 0px;
clear: both;
}
.last {
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
<div class="last"></div>
</body>
</html>
- 3 把那个用于清除的div的宽高设置为2px查看他的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试清除浮动</title>
<style>
div {
height: 100px;
width: 100px;
margin: 10px;
background-color: lightskyblue;
}
.box {
float: left;
}
.clear {
/*前三行只是覆盖前边的样式*/
height: 2px;
width: 2px;
margin: 0px;
clear: both;
}
.last {
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
<div class="last"></div>
</body>
</html>