如何垂直对齐高度未知的浮动元素？

您不能直接执行此 *** 作，因为浮点数与顶部对齐：

如果有一个线框，则浮动框的外部顶部与当前线框的顶部对齐。

确切的规则说（强调我的）：

1. 浮动框的外部顶部不得高于其包含的块的顶部。
2. 浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。
3. 元素的浮动框的外部顶部不得高于包含由源文档中前面的元素生成的框的任何行框的顶部。

1. 必须将浮动框放置在尽可能高的位置。
   
   

也就是说，您可以利用规则4：

• 将每个float放置在建立新块格式化上下文/BFC的内联级元素内，例如

  display: inline-block

• 这些包装器将包含浮点数，因为它们建立了BFC；而由于它们是内联级别，它们将彼此相邻。
• 用于

  vertical-align

  垂直对齐这些包装纸。

请注意，内联块包装器之间可能会出现一些空间。请参见如何删除内联块元素之间的空间？要解决这个问题。

.float-left {  float: left;}.float-right {  float: right;}#main {  border: 1px solid blue;  margin: 0 auto;  width: 500px;}#main > div {  display: inline-block;  vertical-align: middle;  width: 50%;}<div id="main">  <div>    <div >      <p>AAA</p>    </div>  </div>  <div>    <div >      <p>BBB</p>      <p>BBB</p>    </div>  </div></div>