为什么CSS背景颜色不显示浮动？

Question

这是我的源代码，有什么问题吗？

CSS：

 .no1.right {text-align: right;float : right}
 .no1.left {text-align : left;float : left}
 .no1 {background-color: blue}

HTML：

<div class="no1">
    <div class="right">a</div>
    <div class="left">b</div>
</div>

为什么background-color不工作？

Answer 1

你必须清除浮动元素后，最快的方法是

.no1 {overflow: hidden}

浮动元素的高度为零，父元素具有相同（零）的高度。应用蓝色背景，但仅在元素（零）高度中应用。

第二种方法是添加元素clear：

<style>
    .cleaner {clear: both}
</style>

<div class="no1">
    <div class="right">a</div>
    <div class="left">b</div>
    <div class=cleaner></div>
</div>