css:浮动 危害与解决

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

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

危害:

高度塌陷

  1. 情况一:多个同级元素,前者设置浮动,则脱离标准流,”浮到上面”,后者会自动填补空白,造成叠加现象;
    解决办法:紧跟浮动元素后添加空盒子,并设置clear: both;

  2. 情况二:父级嵌套子集盒子,父级未设置宽高,子集浮动,则父级失去”被撑开的自身”物理空间;
    解决办法:父级设置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/

展开阅读全文

没有更多推荐了,返回首页