css：浮动危害与解决

最新推荐文章于 2022-11-26 14:50:57 发布

TuboPe

最新推荐文章于 2022-11-26 14:50:57 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css 浮动

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

从开始接触div＋css，就被前辈们告知：浮动不是个好东西，写浮动，必清浮动。然而，实际上到现在为止自己都没有一个完整的“浮动哪里坏”概念。这篇主要是总结性的东西，应该会不断的更新总结，具体的原理、讲解等，很多大神写的很好，在后面“参考”中均有，需要的朋友可以链接去看。

浮动，原本的作用是，文字环绕，后为布局所用。

危害：

高度塌陷

情况一：多个同级元素，前者设置浮动，则脱离标准流，”浮到上面”，后者会自动填补空白，造成叠加现象；
解决办法：紧跟浮动元素后添加空盒子，并设置clear: both;
情况二：父级嵌套子集盒子，父级未设置宽高，子集浮动，则父级失去”被撑开的自身”物理空间；
解决办法：父级设置overflow: hidden 或 atuo；

解决：

这也只是暂时最为合适的一个解决方案，相信随着技术的更新迭代，还会新的出现，或者已经出现了。

定义公共类 class = clearfix，设置为类 :after 和 *zoom兼容ie7／6，使用时，在含有浮动元素的父级添加即可

.clearfix:after{
    content: "";
    display: table;
    height: 0;
    visibility: both;
    clear: both;
}

.clearfix{
    *zoom: 1;  /*IE7／6*/
}

参考：
基础定义：
http://www.w3school.com.cn/css/css_positioning_floating.asp
八种清除浮动的方法：
http://www.jb51.net/css/173023.html
图文并茂的浮动原理及对策小结：
http://www.cnblogs.com/zhongweizhu/p/6003537.html
张大神的深入剖析（可惜，貌似太监了，只能坐等）：
http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/