第三个div自动浮动

Question

我无法理解 css 是如何工作的，这让我很恼火。我试图做一些基本的并排两个div和一个div在它们下面。 起初我了解到我必须为两个并排的 div 提供 float:left 。出于好奇，我没有为第二个并排 div 提供 float:left，我遇到了这个布局：

然后我给了 float:left 为第二个并排的 div，我遇到了这个布局：

问题：我没有为第三个 div 提供 float:left，但它的行为不像第一个屏幕截图。为什么？

css代码：

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

.container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.blog-posts {
    width: 50%;
    background-color: #0000ff;
    float: left;
}

.other-posts {
    width: 25%;
    background-color: #00ff00;
    float: left;
}

.author-text {
    background-color: #ffff00;
}

html代码：

    <div class="container">
        <div class="blog-posts">dend endje denjde akdlsd gsjgıdg sadsujrg spsadnajd asdnsajdd</div>
        <div class="other-posts">extra dummy text</div>
        <div class="author-text">author text</div>
    </div>

Answer 1

使用浮点数时，会破坏标记的自然box-model 行为。

您的第一个浮动元素的宽度为 50%，相对于父级 (1000 像素)，它将占用 .container 的一半。第二个（浮动）元素将占用下一个 250 像素。好事来了。

第三个元素，它不是浮动的，也是一个div，因此是一个块级元素（因此隐含地它将占用其父元素的 100% 的宽度）。如果将第一个和第二个元素的background-color 分别设置为透明的#0000ff00 和#00ff0000。你会看到你的第三个元素在它们后面增长。

这就是我所说的“打破盒子模型”。现在，为了更好地理解这一点，您可以开始为第三个元素提供显式的width。假设：90%，您将看到黄色背景如何从右侧缩小。

如果您将width 设置为50%，它将“跳转”到第二行。它甚至会像第一个元素一样宽，但高度是其两倍。换句话说，它会尽量适应第一个可用空间。

为了避免这种情况，在过去，我们使用 clearfix hack... 但由于广泛支持 flexbox 和 css 网格，我们不必再依赖浮动来实现这种并排布局。

Float has their own use cases，浮动不是很糟糕，它只是不适合布局。

有关此主题的更多信息，您可以在CSS-Tricks 上查看这篇关于浮动的精彩文章。

Answer 2

将您想要的项目并排包装在另一个包装器中，然后将 flexbox 应用于该包装器：

.my-flex-wrap {
  display: flex;
}

然后删除所有的浮动。完成。

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

.container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.my-flex-wrap {
  display: flex;
}

.blog-posts {
  width: 50%;
  background-color: #0000ff;
}

.other-posts {
  width: 25%;
  background-color: #00ff00;
}

.author-text {
  background-color: #ffff00;
}

<div class="container">
  <div class="my-flex-wrap">
    <div class="blog-posts">dend endje denjde akdlsd gsjgıdg sadsujrg spsadnajd asdnsajdd</div>
    <div class="other-posts">extra dummy text</div>
  </div>
  <div class="author-text">author text</div>
</div>