Question

当我将class="top-menu"和class="pull-right"一起使用时，我得到的结果是图像是右上角的，但是背景颜色没有变为黑色，我的代码有什么问题？ >

如果我删除class="pull-right"，则背景颜色变为黑色

.top-menu {
  background-color: black;
}

.pull-right {
  float: right;
}

<header>
  <div class="header-top">
    <div class="container-fluid top-menu">
      <img src="..." alt="Awsome_Ticket_Logo" class="pull-right">
    </div>
  </div>
</header>

Answer 1

当您浮动某物时，它不再是其父级边界框的一部分。由于您的top-menu父级中没有其他内容，因此边界框将被视为空白，并且其高度为0。

对此的常见解决方案是向父级添加一个clearfix。这将使其包括漂浮的孩子占用的任何空间：

.top-menu {
    background-color: black;
}

.pull-right{
    float: right;
}

.top-menu:after {
    content: "";
    clear: right;
    display: table;
}

<header>
    <div class="header-top">
        <div class="container-fluid top-menu">
            <img src="https://via.placeholder.com/150" alt="Awsome_Ticket_Logo" class="pull-right">
        </div>
    </div>
</header>

Answer 2

这是因为当事物浮动时，容器将变为空，您可以使用clearfix：https://jsfiddle.net/wwWaldi/nrysp61w/18/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Answer 3

我看到很多开发人员的代码都有这个问题。通常，此问题与页面结构的样式错误有关。同样，许多开发人员附带的第一个解决方案是在伪代码中使用clear: both;样式。但是，我认为，如果您学会了如何像一个优秀的开发人员一样进行样式设计，则永远不需要使用clear。只需开始以正常和标准的方式编写页面即可。

当您将float赋予没有float属性的父级的子级时，父级将失去其高度（如果该父级的唯一子级）。避免发生这种情况的最好方法是划分页面的各个部分，并使它们具有良好的浮动性。这样，您就无需使用clear样式。

header,
.header-top,
.top-menu {
  width: 100%;
  float: left;
}

.top-menu {
  padding: 5px;
  background-color: red;
}

img{
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  background: blue;
}

  <header>
      <div class="header-top">
          <div class="container-fluid top-menu">
              <img src="" alt="Awsome_Ticket_Logo" class="pull-right">
          </div>
      </div>
  </header>

不能在不同的标签中分配两种样式

3 个答案: