时间戳

首页 > 解决方案 > 带边框折叠的css浮动

html - 带边框折叠的css浮动

问题描述

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

标签： htmlcsscss-float

解决方案

  1. 如果您取消设置float框 3，它将返回到左侧。
  2. 您看不到它，因为框 1 具有float: left并覆盖了它。尝试使框 1 透明以使框 3 出现。（请参阅下面的片段）
  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>

推荐阅读