html - clear: どちらもラッピングを妨げません

Question

3 つの div があります。そのうちの 2 つは (左右に) フローティングで、3 つ目は他の 2 つの下に配置する必要があります。以前clear: bothはそうしていましたが、まったく機能しませんでした。

http://jsfiddle.net/uYrPY/1/

CSS

.left, .right {
    width: 50px;
    height: 100px;
    background-color: red;
}
.left {float: left;}
.right {float: right;}
.bottom {
    background-color: blue;
    width: 100px;
    height: 100px;
    clear: both;
}

HTML

<div class="left">
</div>
<div class="right">
</div>
<div class="bottom">
</div>

よろしくお願いします。

Answer 1

jsfiddleの「clear:」と「both」の間に改行しないスペースがある場合は、それを削除すると正常に動作します!

http://jsfiddle.net/uYrPY/2/

 .left, .right {
    width: 50px;
    height: 100px;
    background-color: red;
}
.left {float: left;}
.right {float: right;}
.bottom {
    background-color: blue;
    width: 100px;
    height: 100px;
    clear: both;
}