CSS清除浮动
1.在浮动的元素上，定义父元素，然后再父元素上加固定高height。
<style type="text/css">
.div1 {
500px;
/*方法一：在浮动的元素上，定义父元素，然后再父元素上加固定高height。*/
height:200px;
}
.box1,
.box2 {
100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
}
.div2 {
500px;
height: 200px;
background: green;
}
</style>
<div class="div1">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="div2">
div2
</div>
2.在浮动的结尾处加空div标签 clear:both。
<style type="text/css">
.div1 {
500px;
}
.box1,
.box2 {
100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
}
.div2 {
500px;
height: 200px;
background: green;
}
.clear {
clear: both;
}
</style>
<div class="div1">
<div class="box1">box1</div>
<div class="box2">box2</div>
<!--清除浮动-->
<div class="clear"></div>
</div>
<div class="div2">
div2
</div>
3.父级div定义 伪类:after 和 zoom。
<style type="text/css">
.div1 {
500px;
}
.box1,
.box2 {
100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
}
.div2 {
500px;
height: 200px;
background: green;
}
.clear:after {
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
.clear{
zoom:1;/*为了兼容IE*/
}
</style>
<div class="div1 clear">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="div2">
div2
</div>
4.使用双伪元素清除浮动.
<style type="text/css">
.div1 {
500px;
}
.box1,
.box2 {
100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
}
.div2 {
500px;
height: 200px;
background: green;
}
.clear:before, .clear:after {
content: "";
display: block;
clear: both;
}
.clear{
zoom: 1;
}
</style>
<div class="div1 clear">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="div2">
div2
</div>
5.父级div定义 overflow:hidden/auto。
<style type="text/css">
.div1 {
500px;
overflow: hidden/auto;
}
.box1,
.box2 {
100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
}
.div2 {
500px;
height: 200px;
background: green;
}
</style>
<div class="div1">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="div2">
div2
</div>
6.父级div定义display:table。
<style type="text/css">
.div1 {
500px;
display:table
}
.box1,
.box2 {
100px;
height: 100px;
background: red;
margin-left: 10px;
float: left;
}
.div2 {
500px;
height: 200px;
background: green;
}
</style>
<div class="div1">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="div2">
div2
</div>