css - CSS 跨度向左浮动

Question

所以我有一个 div 和两个跨度：

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

假设 B 和 C 有足够的内容。CSS 片段是：

.A { position: absolute; } /* I need this to be absolute */
.B, .C { float: left; }
.clear { clear: both; }

但我不断得到正确图像的布局，而我希望它像第一张图像的布局（请参阅下图）

请帮我。如果您能解释一下为什么会发生这种情况以及为什么我的代码没有像我预期的那样工作，那就更好了。浮动实际上是如何工作的。谢谢。

Answer 1

您在 html 中的类是大写的，但不是在 CSS 中？

编辑：

.A { position: absolute; border: 1px solid blue; } 
.B, .C { float: left; border: 1px solid red; width: 100px; height: 20px; }
.C { height: 100px; }
.clear { clear: both; }

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

JSFiddle 上的演示

Answer 2

该类区分大小写，“a”不是“A”！

更改您的 HTML：

<div class="a">
    <span class="b"></span>
    <span class="c"></span>
    <span class="clear"></span>
</div>

此外，浮动的工作取决于宽度。给 b 和 c div 一个宽度...