CSS之 float 属性

标签：display   oom   浮动   css   容错性   标签   外部链接   优化   color   

特性：

  float的设计初衷仅仅是文字环绕效果
  浮动具有破坏性,会使父容器高度塌陷
  清除浮动方法: 1.脚底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE6/7)
  两者差异: 1.与外部链接,会发生margin重叠 2.封闭式,不会外部发生冲突
  两者不足: 1.多余空标签 2.兼容性无法一方通行
  权衡后的策略: .clearfix需作用在父元素上

1 IE8+: clearfix::after{ conter:‘‘; display: block; clear: both; height: 0; overflow: hidden;}
2 IE6/7: celarfix { *zoom:1; };
3 优化: .clearfix::after{ content: ‘‘; display: table; clear: both;}

注意项

  容错性糟糕,容易出问题
  需要元素固定尺寸,无重用性
  在IE低版本下,会引发很多问题

兼容性问题

  IE6: 浮动有双倍边距,跟随浮动元素3px,后面文字会下沉
  IE7: 浮动元素与文本不在同一行,最后一个字符重叠....

CSS之 float 属性

标签：display   oom   浮动   css   容错性   标签   外部链接   优化   color   

原文地址：http://www.cnblogs.com/Beck-Z/p/7691952.html