css之“清除浮动的3种方法”

 

<!--一、清除浮动的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执行，其他浏览器不执行*/
        }