首页 > Web开发 > 详细

CSS清楚浮动常用方法

时间:2015-07-27 14:45:06      阅读:275      评论:0      收藏:0      [点我收藏+]

  CSS开发过程中清楚浮动是难以避免要使用的,今天牺牲午觉的时间整理一下吧!


 

一、给父级加高度:这样肯定不存在父级坍塌的问题了;

问题:扩展性不好,如果要自适应高度就悲催了。

 

二、让父级浮动:父级和子级都浮动就不存在这个问题了;

问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !),

再说了所有的父级都能浮动吗,也有扩展性的问题。

 

三、给父级加display:inline-block 清浮动方法:

  问题:margin左右自动失效;

 

四、空标签清浮动

  在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}
  在浮动元素下加<br clear="all"/>

  问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差),不符合工作中:结构、样式、行为,三者分离的要求。

 

五、after伪类 清浮动方法(现在主流方法)

.clear:after{
  content:‘‘;
  display:block;
  clear:both;
} .clear{
  zoom:1;
}

     after伪类: 元素内部末尾添加内容;

      :after{content"添加的内容";} IE6,7下不兼容

     zoom 缩放

      a、触发 IE下 haslayout,使元素根据自身内容计算宽高。

      b、FF 不支持;


 

CSS清楚浮动常用方法

原文:http://www.cnblogs.com/kiscall/p/4679896.html

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