怎样使用float与inline-block

这期内容当中小编将会给大家带来有关怎样使用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了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。