css 清除浮动

2021-07-11 07:04

阅读:574

标签:属性   缺点   元素   over   line   play   str   display   clear   

功能: 实现图文混排效果

原理: 绝对定位的元素脱离了文档流,而浮动元素依旧在文档流中;

 

清除浮动:(高度塌陷)

1. 额外标签法,

(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

2. 使用after伪元素(该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素)

      #parent{zoom: 1}

#parent:after{

    content:".";

    height:0; //line-height: 0;

    visibility:hidden;

    display:block;

    clear:both;

}

3. overflow + zoom方法(zoom, IE独有属性,类似于缩放)

.fix{overflow:hidden; zoom:1;}

(有问题的,就是这个overflow:hidden;是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。)

css 清除浮动

标签:属性   缺点   元素   over   line   play   str   display   clear   

原文地址:http://www.cnblogs.com/peiling-home/p/7087384.html


评论


亲,登录后才可以留言!