CSS плавать с обвалом границы

Question

Я новичок в css, и у меня возникла проблема, когда я узнал поведение float с сайта MDN https://developer.mozilla.org/en-US/docs/Web/CSS/float. Я попробовал пример CodePen на вышеуказанном сайте и закомментировал строку 17 в файле css.В результате я получил, что синяя коробка кажется волшебным образом исчезает.Я предполагаю, что с обрушением границы что-то не так.Кто-нибудь может указать мне правильное направление и объяснить, что там происходит?

Answer 1

Это потому, что коробка 3 теперь находится за коробкой 1.

Что означает float, любое содержимое после элемента будет перенесено в противоположном направлении, а также его поток будет сброшен, т. Е. Начнется с той точки, где он должен был быть размещен, когда элемент float удален из DOM.

Например

Как видите, фактическая позиция абзаца начинается с начальной позиции 1.

Что произойдет, если вместо абзаца есть блочный элемент такой же ширины и высоты?

Точно !! Он пойдет за рамкой 1. Почему 3 ниже 1? Потому что справа нет места. Если мы увеличим ширину блока 3, он будет соответственно обернут слева.

И так, что будет в вашем случае?

Да, коробка 3 будет идти за коробкой 1, а все остальное выложено соответственно.

Answer 2

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>