最近工做比较轻松,因此一直在写本身的canvas库..也没啥好知识点写博客,停滞了有2个月了吧.故今天决心花些时间来写一篇css的博文,恰好最近项目写界面的时候碰到这2个家伙...因此就和你们一块儿来半深刻的理解下
首先是兼容性css
float的话彻底不用担忧什么浏览器都能兼容,比较是一个很老的属性了.canvas
inline-block则在IE8以上(包括8)才能使用,查了下资料,其实IE5.5的时候就已经有inline-block了,只是实现不同,因此想要兼容低版本的IE就只能用额外的代码浏览器
display:inline; //强行不换行
zoom:1; // 用来触发hasLayout,有兴趣深刻理解的猴子可自行了解
其次是对父亲元素的影响code
inline-block的话,没什么好说的,惟一要注意的就是每一个设置了inline-block的元素直接都会有空隙,能够在父亲元素里设置博客
font-size: 0;
来消除,不事后果是什么你们都知道,不过我依然以为这是最简单暴力的方法,固然也有其余方法,仍是请自行查找it
float的话,设置了该属性的元素会脱离文本流,也就是说和position:absolute同样,不过对于同样设置了该属性的元素则不会.因此带来的问题就是父亲元素并不会随着子元素的大小改变长宽,可是若是父亲元素设置为inline-block的话,则长宽会随着子元素变化(前提是浏览器兼容inline-block,若是兼容的话我就直接用inline-block了~).io
因此在不给父亲元素设置inline-block属性的时候就须要清除浮动.class
在父亲元素结束前最后一个浮动元素后.clear:both下(原理大概就是用一个有文本流的元素定位父亲元素的大小),这样父亲元素的高度就会随浮动元素改变兼容性
最后是一点其余的小区别
基线:float和inline-block的基线不同
float的基线是浮动元素紧贴顶部
inline-block的基线是默认的基线,因此比较灵活能够配合vertical-align.
最后的最后...就我的而言仍是喜欢用inline-block多点,用float的地方多数能够用inline-block来代替,惟有当要围绕某个元素时float是惟一的解决方法