为什么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>

Answer 2

添加到您的包装器div float: left;并添加;追加blue。

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