css - 在CSS中显示:block vs clear:both有什么区别

Question

除了标题中的问题，我也反过来想知道display:inline和clear:none有什么区别？

编辑:我有预感这个问题会不受欢迎......让我详细说明。

两者似乎都涉及将元素放在自己的行上。 “display:inline”使元素内联流动，这让我觉得与“clear:none”的行为非常相似，它允许元素 float 在你旁边。

相反，如果你想要你的 div，也许是本例中的页脚 https://css-tricks.com/all-about-floats/ , 独立站立然后你可以说“clear:both”表示没有任何东西可以漂浮在你旁边。

但这种行为似乎与“display:block”非常相似。

因此我的问题是，这些行为或预期用途有何不同？

我敢肯定，到现在为止我在 CSS 方面完全是个业余爱好者，但在从事后端编程 15 年后，我正努力面对恐惧并学习它。我希望有人可以回答这个问题，而不是因为我试图学习新东西而对我投反对票......

Answer 1

display:block -> 将元素显示为 block 元素(如 <p> )

clear:both -> 左侧或右侧都不允许有 float 元素

block 级元素总是换行开始并占据可用的整个宽度(尽可能向左和向右拉伸(stretch))。

内联元素不会在新行开始，只会占据必要的宽度。