CSS清除浮动的方法

Posted 2022-11-20 start-bigin

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。

3.父级div定义 伪类:after 和 zoom。

4.父级div定义 overflow:hidden。

5.父级div也一起浮动。

6.父级div定义display:table。