这期内容当中小编将会给大家带来有关怎样使用float与inline-block，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
首先是兼容性
float的话完全不用担心什么浏览器都能兼容,比较是一个很老的属性了.
inline-block则在IE8以上(包括8)才能使用,查了下资料,其实IE5.5的时候就已经有inline-block了,只是实现不一样,所以想要兼容低版本的IE就只能用额外的代码
代码如下:
display:inline; //强行不换行
zoom:1; // 用来触发hasLayout,有兴趣深入理解的猴子可自行了解
其次是对父亲元素的影响
inline-block的话,没什么好说的,唯一要注意的就是每个设置了inline-block的元素直接都会有空隙,可以在父亲元素里设置
代码如下:
font-size: 0;
来消除,不过后果是什么大家都知道,不过我依然觉得这是最简单暴力的方法,当然也有其他方法,还是请自行查找
float的话,设置了该属性的元素会脱离文本流,也就是说和position:absolute一样,不过对于一样设置了该属性的元素则不会.所以带来的问题就是父亲元素并不会随着子元素的大小改变长宽,但是如果父亲元素设置为inline-block的话,则长宽会随着子元素变化(前提是浏览器兼容inline-block,如果兼容的话我就直接用inline-block了~).
所以在不给父亲元素设置inline-block属性的时候就需要清除浮动.
在父亲元素结束前最后一个浮动元素后.clear:both下(原理大概就是用一个有文本流的元素定位父亲元素的大小),这样父亲元素的高度就会随浮动元素改变
最后是一点其他的小区别
基线:float和inline-block的基线不一样
float的基线是浮动元素紧贴顶部
inline-block的基线是默认的基线,所以比较灵活可以配合vertical-align.
上述就是小编为大家分享的怎样使用float与inline-block了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
