HTML Div类背景保持空白

Question

所以，我一直在尝试更好地了解CSS和HTML。但每当我尝试设置div（类）的背景颜色时，它就会保持白色。我希望你们中的一个可以帮助我。谢谢（我已尝试添加代码段，但它不会让我）

.navigator {
    background-color: #FF00FF;
    background-size: 150%;
}
 
.pagina {
    float: left;
    margin-left: 120px;
}
 
.informatie {
    float: left;
}

<div class="navigator">
    <div class="pagina">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle=
            "dropdown" id="menu1" type="button">Pagina's <span class=
            "caret"></span></button>
            <ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
                <li role="presentation">
                    <a href="#" role="menuitem">Pagina 1</a>
                </li>
                <li role="presentation">
                    <a href="#" role="menuitem">Pagina 2</a>
                </li>
                <li role="presentation">
                    <a href="#" role="menuitem">Pagina 3</a>
                </li>
                <li class="divider" role="presentation"></li>
                <li role="presentation">
                    <a href="#" role="menuitem">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="informatie">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle=
            "dropdown" id="menu1" type="button">Informatie <span class=
            "caret"></span></button>
            <ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
                <li role="presentation">
                    <a href="#" role="menuitem">informatie 1</a>
                </li>
                <li role="presentation">
                    <a href="#" role="menuitem">informatie 2</a>
                </li>
                <li role="presentation">
                    <a href="#" role="menuitem">informatie 3</a>
                </li>
                <li class="divider" role="presentation"></li>
                <li role="presentation">
                    <a href="#" role="menuitem">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

使用CSS flexBox

/Users/xxx/Library/.../Provisioning Profiles/...

.navigator {
  background-color: #FF00FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

元素.navigator具有浮动的子元素。浮动元素时，它们将从正常文档流中取出，不占用任何空间。 .pagina和.informatie都已浮动，因此.navigator没有高度，因此没有背景颜色。

将clearfix添加到具有浮动子元素的父元素。

＆＃13;

＆＃13;

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.cf:after {
  clear: both;
}
.navigator {
  background-color: #FF00FF;
  background-size: 150%;
}
.pagina {
  float: left;
  margin-left: 120px;
}
.informatie {
  float: left;
}

＆＃13;

<div class="navigator cf">
  <div class="pagina">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Pagina's <span class="caret"></span>
      </button>
      <ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
        <li role="presentation">
          <a href="#" role="menuitem">Pagina 1</a>
        </li>
        <li role="presentation">
          <a href="#" role="menuitem">Pagina 2</a>
        </li>
        <li role="presentation">
          <a href="#" role="menuitem">Pagina 3</a>
        </li>
        <li class="divider" role="presentation"></li>
        <li role="presentation">
          <a href="#" role="menuitem">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="informatie">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="menu1" type="button">Informatie <span class="caret"></span>
      </button>
      <ul aria-labelledby="menu1" class="dropdown-menu" role="menu">
        <li role="presentation">
          <a href="#" role="menuitem">informatie 1</a>
        </li>
        <li role="presentation">
          <a href="#" role="menuitem">informatie 2</a>
        </li>
        <li role="presentation">
          <a href="#" role="menuitem">informatie 3</a>
        </li>
        <li class="divider" role="presentation"></li>
        <li role="presentation">
          <a href="#" role="menuitem">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;