Question

我读过这篇文章http://css-tricks.com/implied-block/。我在自己的chrome浏览器中测试它，是的，使用float样式生成display：block样式。正如我所知，display：block意味着元素成为块级元素，它占据整行。下一个元素应该从一个新行开始。

但是我测试了float属性。虽然它生成了display：block，但下一个元素（也是float）仍然在同一行。那有什么关系呢？

 <style type="text/css">
    span
    {
        width: 30px;
        margin: 0 10px;
        background-color: Red;
        float:left;
    }
 </style>
<body>
<span>222</span><span>323</span><span>dd</span>

Answer 1

您需要清除浮动，以便“浮动”元素突破到下一行。您可以用div替换span元素，您将看到相同的效果。

Answer 2

您可以尝试使用此博客，这可能有助于您了解有关float

的更多信息

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 3

如果您只是希望每个跨度占据一个新的行，那么分别给它们：

span { display:block; }

并删除：

span { float:left; }

div也可以在没有css的情况下完成此任务。

CSS浮动属性和块

3 个答案: