display:inline和float:left实现行内布局的区别

最新推荐文章于 2024-01-03 07:15:00 发布

转载最新推荐文章于 2024-01-03 07:15:00 发布 · 346 阅读

前端其他专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了使用CSS的display:inline和float:left实现行内布局的区别。详细解释了两种方法如何影响元素的占位属性和高度属性，以及它们如何与其他元素交互以实现水平布局。此外，还提到了display:inline在解决IE6双倍浮动问题上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display:inline和float:left实现行内布局的区别

原文地址：https://blog.youkuaiyun.com/danchejikafo/article/details/52334037

float:left是让元素浮动在左边而已，元素的占位属性还是块级属性，height属性还是有效。

display:inline是让元素的占位属性变成内联属性，height无效

设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示，哪怕其它的元素的代码在前，除非也给前面的元素加上float:left后，才允许同行显示。

设了display:inline的元素，允许它的前后存在其它的内联元素同行显示。关于代码在其前面的块元素之同行显示，则要让前面的元素浮动（不管是左还是右浮动）或设为display:inline，还有代码在后面的是块元素（管它有没有浮动，是左浮动还是右浮动），均不能与之同行，除非设为display:inline。

另外，给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。