inline-block和float应区别对待

深碍√TFBOYSˉ_ 2022-07-24 10:17 118阅读 0赞

参考资料：[http://www.w3cplus.com/css/inline-blocks.html][http_www.w3cplus.com_css_inline-blocks.html]

inline-block和float大战已经持续了一段时间，有的人钟爱float，整个页面都用的是float布局，而有些人因为float之后的元素会脱离文档流，而钟情于inline-block。今天因为在做任务，使用inline-block出现了一点小问题，为加深记忆，特写此博文。

**float**  
因为浮动元素是脱离文档流的，所以他们会一个紧贴一个的排列,没有默认的空白存在，如下图  
![这里写图片描述][20160520093327889]  
正因为浮动元素是脱离文档流的，使得周围元素环绕这个元素，所以当需要文字环绕的效果时可以用浮动来实现。并且浮动后的元素之间相互的没有默认空白，这对于排版来说也是一件极好的事，可以从零开始，无需处理自带的样式，且没有兼容性问题。  
但是浮动元素会打乱整个文档流，后面的元素需要清除浮动后才能按照原来的位置显示，如果在一个经常变化的页面中，有时会因为没有清除浮动而产生莫名其妙的bug。  
再者，浮动元素垂直对齐方式始终为顶部对齐，水平方向也不能通过设置父元素的text-align来设置，所以这一点大家需要考虑。

**inline-block**  
inline-block在内部表现方式上类似block元素，例如拥有block元素的width height,padding,border与margin，而在外部排列上类似于inline元素，不会像块级元素一样从上到下排列而是像行内元素那样再一行内从左到右的排列。

inline-block因为具有行内元素的特性，所以可以通过设置父元素的text-align来使其水平居中。垂直方向默认是按照父元素的基线来基线（vertical-align:baseline)排列，可以通过元素自身的vertical-align来设置。  
举个小例子  
当不对元素设置vertical-align时：  
![这里写图片描述][20160520100143331]  
可以看到十分混乱  
当设置了vertical-align后，事情瞬间变得不一样了  
![这里写图片描述][20160520100244302]  
具体的基线位置请看下图[**图片来源**][Link 1]  
![这里写图片描述][20160520100425586]

还有就是inline-block中存在的空白问题。我们先来看空白产生的原因：是因为在书写元素时存在换行符，所以存在空白。好吧，这个原因也是醉了。为了**解决这个空白**，简单粗暴的我们可以在书写元素的时候一行写下，不过这种方法仅限于元素特别少的情况下；第二中可以设置父级元素的font-size为0，然后在使用子元素时记得重新设置font-size。

[http_www.w3cplus.com_css_inline-blocks.html]: http://www.w3cplus.com/css/inline-blocks.html
[20160520093327889]: /images/20220722/bee3d723b97b4f069c6634c169b5eaef.png
[20160520100143331]: /images/20220722/1da5beb941b84672b7a1132cecace687.png
[20160520100244302]: /images/20220722/a10cd4861042493bb2cf70d06bf82878.png
[Link 1]: http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
[20160520100425586]: /images/20220722/c76aab4a4abc4df2aaeb78faf51a1515.png