首页 > Web开发 > 详细

css 清除浮动

时间:2017-06-27 22:54:04      阅读:257      评论:0      收藏:0      [点我收藏+]

功能: 实现图文混排效果

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

 

清除浮动:(高度塌陷)

1. 额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使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 清除浮动

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!