CSS清除浮动的方法【学习笔记】

CSS清除浮动

1.在浮动的元素上，定义父元素，然后再父元素上加固定高height。

<style type="text/css">

.div1 {

　　width: 500px;

　　/*方法一：在浮动的元素上，定义父元素，然后再父元素上加固定高height。*/

　　height:200px;

}

.box1,

.box2 {

　　width: 100px;

　　height: 100px;

　　background: red;

　　margin-left: 10px;

　　float: left;

}

.div2 {

　　width: 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 {

　　width: 500px;

}

.box1,

.box2 {

　　width: 100px;

　　height: 100px;

　　background: red;

　　margin-left: 10px;

　　float: left;

}

.div2 {

　　width: 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 {

　　width: 500px;

}

.box1,

.box2 {

　　width: 100px;

　　height: 100px;

　　background: red;

　　margin-left: 10px;

　　float: left;　　

}

.div2 {

　　width: 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 {

　　width: 500px;

}

.box1,

.box2 {

　　width: 100px;

　　height: 100px;

　　background: red;

　　margin-left: 10px;

　　float: left;　　

}

.div2 {

　　width: 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 {

　　width: 500px;

　　overflow: hidden/auto;

}

.box1,

.box2 {

　　width: 100px;

　　height: 100px;

　　background: red;

　　margin-left: 10px;

　　float: left;

}

.div2 {

　　width: 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 {

　　width: 500px;

　　display:table

}

.box1,

.box2 {

　　width: 100px;

　　height: 100px;

　　background: red;

　　margin-left: 10px;

　　float: left;

}

.div2 {

　　width: 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>