第三次div自动浮动

Question

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

_{（来源：imge.to）}

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

_{（来源：imge.to）}

问题：我没有给第三个 float:left div 但它不像第一个屏幕截图那样。为什么？

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

将您想要的项目并排包装在另一个包装器中，然后将 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>

Answer 2

当您使用浮动时，您会破坏标记的自然 box-model 行为。

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

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

这就是我"breaking the box-model" 的意思。现在，为了更好地理解这一点，您可以开始为第三个元素提供一个明确的 width。比方说：90%，您将看到黄色背景如何从右侧自行减少。

如果您将 width 设置为 50% 它会 "jump" 向下，到第二行。它甚至比第一个元素更宽，但高度是它的两倍。换句话说，它将尝试适应第一个可用的 space.

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

Float has their own use cases，不是说浮动很烂，只是不适合布局。

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

第三次div自动浮动

Third div automatically floating

html

css

css-float