为什么将文本添加到 div（flexbox）中会使其他 div 浮动？

Question

当我不添加任何文本时，我的所有框都在同一水平面上，但是一旦我添加文本，其中两个开始浮动我希望它们即使在放置文本后也处于同一水平上。

  <div class="main-container">
        <div class="container">
            <div class="boxes">s</div>
            <div class="boxes"></div>
            <div class="boxes"></div><br>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div><br>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
        </div>
    </div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.main-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 4px;
  font-size: 3em;
}

Click to see the Fiddle

Answer 1

让所有的箱子保持在同一水平面上。在 boxes class.

中设置 vertical-align to bottom

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.main-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 4px;
  font-size: 3em;
  vertical-align: bottom;
}

<div class="main-container">
  <div class="container">
    <div class="boxes">S</div>
    <div class="boxes"></div>
    <div class="boxes"></div><br>
    <div class="boxes"></div>
    <div class="boxes">F</div>
    <div class="boxes"></div><br>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes">R</div>
  </div>
</div>

说明

发生这种情况是因为默认情况下 vertical-align 是基线。

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

如果 div 为空，它的基线是底部边距边缘，当我们在 div 中添加文本时，它的基线成为最后一个文本行。当您在 div 中添加一个字符时，它会更改 div 的基线并与空 div.

的基线对齐

为什么将文本添加到 div（flexbox）中会使其他 div 浮动？

Why does adding text into a div (flexbox) makes other divs float?

html

css