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

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>