使用帶有clear屬性的空元素
在浮動元素後面使用一個空元素來清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 400px;
background: #1bff18;
}
.item1 {
background: #f71d1a;
width: 100px;
height: 100px;
float: left;
}
.item2 {
background: #ff944f;
width: 100px;
height: 100px;
float: right;
}
.item3 {
background: #e9fd29;
width: 200px;
height: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="clear"></div>
<div class="item3"></div>
</div>
</body>
</html>
overflow: hiden或auto
爲浮動元素的容器添加overflow:hiden或者overflow: auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 400px;
background: #1bff18;
overflow: hidden;
zoom:1
}
.item1 {
background: #f71d1a;
width: 100px;
height: 100px;
float: left;
}
.item2 {
background: #ff944f;
width: 100px;
height: 100px;
float: right;
}
.item3 {
background: #e9fd29;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
與使用空的元素來清除浮動相比,但是item1會覆蓋了item3
給浮動元素容器添加浮動
給浮動元素添加浮動,這樣可以清除內部的浮動,但是還會有外部浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 400px;
background: #1bff18;
float: left;
}
.item1 {
background: #f71d1a;
width: 100px;
height: 100px;
float: left;
}
.item2 {
background: #ff944f;
width: 100px;
height: 100px;
float: right;
}
.content1 {
background: #e9fd29;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
</div>
<div class="content1"></div>
</body>
</html>
使用:after的僞元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 400px;
background: #1bff18;
}
.item1 {
background: #f71d1a;
width: 100px;
height: 100px;
float: left;
}
.item2 {
background: #ff944f;
width: 100px;
height: 100px;
float: right;
}
.item3 {
background: #e9fd29;
width: 200px;
height: 200px;
}
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
與使用空的元素來清除浮動相比,但是item1會覆蓋了item3