CSS之 float 属性

最新推荐文章于 2025-05-05 22:30:13 发布

转载最新推荐文章于 2025-05-05 22:30:13 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hbjhh1aji1aa&title=CSS%E4%B9%8B+float+%E5%B1%9E%E6%80%A7

前端专栏收录该内容

241 篇文章

订阅专栏

本文深入探讨了CSS中float属性的特性和其带来的布局问题，包括父容器高度塌陷及解决策略，如clearfix方法在不同浏览器版本中的实现技巧，以及在实际应用中需要注意的兼容性和容错性问题。

特性：

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;}