为何top-bar下方的div未换行？CSS浮动布局问题求助

问题场景 #

我要实现这样的页面布局：顶部有一个导航栏（top-bar），左侧和右侧分别放置不同元素；导航栏下方是一个包含两个并排按钮的区域。我给导航栏内的.bar-left设置float:left，.bar-right设置float:right，本以为下方的.two-btns会从新一行开始，结果所有元素挤在了同一行，变成「top-bar左侧内容」「two-btns按钮1」「two-btns按钮2」「top-bar右侧内容」的排列。

相关代码 #

HTML代码：

<div class="top-bar">
  <div class="bar-left">
    <span class="top-bar-title text">MYTEXT</span>
    <img src="res/rev.svg" alt="MY Logo"/>
  </div>
  <div class="bar-right">
    <a href="www.google.com">About</a>
    <button class="login-btn">Login</button>
  </div>
</div>
<div class="two-btns">
  <button class="btn1">Button 1</button>
  <button class="btn2">Button 2</button>
</div>

CSS代码：

.bar-left {
    vertical-align: center;
    float: left;
}

.bar-right {
    vertical-align: center;
    float: right;
}

问题原因 #

浮动元素会脱离正常的文档流，导致它们的父元素.top-bar高度塌陷（高度变为0）。后续的.two-btns元素会向上填充到浮动元素旁边的空白空间，所以就出现了所有元素挤在同一行的情况。

另外提一句：你CSS里写的vertical-align: center是无效的，这个属性的有效值是middle、top、bottom这类值，不是center。

解决方案 #

核心是清除浮动，让父元素.top-bar重新包裹住浮动的子元素，常用三种方法：

方法1：添加空元素清除浮动 #

在.top-bar的末尾加一个空div，设置clear:both：

<div class="top-bar">
  <div class="bar-left">
    <span class="top-bar-title text">MYTEXT</span>
    <img src="res/rev.svg" alt="MY Logo"/>
  </div>
  <div class="bar-right">
    <a href="www.google.com">About</a>
    <button class="login-btn">Login</button>
  </div>
  <div style="clear: both;"></div>
</div>

方法2：伪元素清除浮动（推荐） #

不用修改HTML结构，给.top-bar添加CSS伪元素：

.top-bar::after {
  content: "";
  display: block;
  clear: both;
}

这是最常用的清除浮动方案，不会增加冗余HTML元素。

方法3：触发BFC包裹浮动元素 #

给.top-bar设置overflow:hidden或overflow:auto，触发块级格式化上下文（BFC），让父元素包裹住浮动子元素：

.top-bar {
  overflow: hidden;
}

更简洁的替代方案：用Flex布局实现导航栏 #

完全不用浮动，用Flex布局可以轻松实现导航栏左右分布+垂直居中，还能避免浮动带来的各种问题：

.top-bar {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中元素 */
}

这样.bar-left和.bar-right不用设置任何浮动，.top-bar会自动包裹住子元素，后续的.two-btns自然会在新一行排列。

内容的提问来源于stack exchange，提问作者Kraken