CSS Span Float Left

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>

Demo on 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赋予宽度......