第一种:使用div空标签法
<head>
<style>
.left,
.right {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.test {
width: 500px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
<!-- 清除浮动 -->
<div style="clear: both"></div>
</div>
<div class="test"></div>
</body>
第二种:父元素使用overflow: hidden
<head>
<style>
.left,
.right {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.test {
width: 500px;
height: 200px;
background-color: red;
}
/* 清除浮动 */
.parent {
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="test"></div>
</body>
第三种:伪元素选择器:after
<head>
<style>
.left,
.right {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.test {
width: 500px;
height: 200px;
background-color: red;
}
/* 清除浮动 */
.parent::after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/* IE6/7 清除浮动 */
.parent {
*zoom: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="test"></div>
</body>