<!--一、清除浮动的3种方法、-->
<!--1.给最后一个标签添加clear:both 不推荐使用(添加无意义标签,语义化差)-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="clear-a">清除浮动的方法</p>
</div>
<!--2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐-内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素)-->
<div>
<ul class="clear-b">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p>清除浮动的方法</p>
</div>
<!--3.使用after伪元素清除浮动(推荐使用)-->
<div>
<ul class="clear-c">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p>清除浮动的方法</p>
</div>
/*a*/
.clear-a{
clear: both;
}
/*b*/
.clear-b{
overflow: hidden;
}
/*c*/
/*优点:符合闭合浮动思想,结构语义化正确*/
/*缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.*/
.clear-c:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clear-c{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}