css 浮动并折叠边框

Question

我是 css 的新手，当我从 MDN 网站 https://developer.mozilla.org/en-US/docs/Web/CSS/float 学习 float 的行为时遇到了问题。我在上面的网站上尝试了 CodePen 示例，并在 css 文件中注释掉了第 17 行。我得到的结果是蓝色框似乎神奇地消失了。我的猜测是边界崩溃有问题。谁能给我指出正确的方向并解释那里发生了什么？

Answer 1

如果您取消设置框 3 的 float，它将回到左侧。
你看不到它，因为盒子 1 有 float: left 并盖住了它。尝试使框 1 透明以显示框 3。（参考下面的片段）
方框3的内容将被推到下一行，因为方框1已被占用最左边的位置。

如有错误请指正。谢谢

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  /* float: right; */
  background: cyan;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float -->
<section>
  <div class="left" style="opacity:0;">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi tristique sapien ac erat tincidunt, sit amet dignissim
    lectus vulputate. Donec id iaculis velit. Aliquam vel
    malesuada erat. Praesent non magna ac massa aliquet tincidunt
    vel in massa. Phasellus feugiat est vel leo finibus congue.
  </p>
</section>

Answer 2

这是因为盒子 3 现在在盒子 1 后面。

float 的意思是，元素之后的任何内容将以相反的方向换行，并且其流向将被重置，即它将从当 float 元素从 DOM.

例如

可以看到段落的实际位置是从1的初始位置开始的。

当段落中出现相同宽度和高度的块元素时会发生什么情况？

没错！！它会在框 1 后面。为什么 3 在 1 下面？因为右边没有space。如果我们增加框 3 的宽度，那么它会相应地在左边换行。

那么你的情况会怎样？

是的，框 3 将放在框 1 后面，其他所有内容都相应地布置。

css 浮动并折叠边框

css float with border collapse

html

css

css-float