В CSS как переполнение взаимодействует с float? - PullRequest
Новая
       19

В CSS как переполнение взаимодействует с float?

0 голосов
/ 25 марта 2020

Меня смущает взаимодействие, которое я наблюдаю между свойством overflow элемента и плавающим элементом элемента-брата. Учтите следующее: 

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
  width: 50px;
  height: 150px;
}
<h2>Without clear</h2>
<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</div>

(Этот пример был адаптирован из этого примера на w3schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear

В этом случае dev1 плавает слева от div2 и находится внутри поля для div2 - например, граница для div2 проходит выше и слева от div1, но текстовое содержимое div2 оборачивается вокруг div1. Но также обратите внимание: из-за установленной ширины / высоты на div2 текст в div2 переполняется ниже.

Теперь добавьте переполнение: скрытый; к div2: 

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
  width: 50px;
  height: 150px;
  overflow: hidden;
}
<h2>Without clear</h2>
<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</div>

Теперь div2 находится полностью справа от div1 - его граница больше не распространяется вокруг div1.

Почему добавляется свойство overflow: hidden чтобы div2 изменил свой макет взаимодействия с div1 таким образом? (Тот же эффект также имеет место для переполнения: авто или переполнения: прокрутка.)

1 Ответ

0 голосов
/ 26 марта 2020

Вам необходимо рассмотреть концепцию Контексты форматирования блоков , где вы можете прочитать следующее:

Плавания, абсолютно позиционированные элементы, контейнерные блоки (такие как inline-блоки, ячейки таблиц и заголовки таблиц), которые не являются блочными блоками, и блочные блоки с «переполнением», отличным от «видимого» * ​​1007 * (кроме случаев, когда это значение было передано в область просмотра) Establi sh новые контексты форматирования блока для их содержимого .

Таким образом, при добавлении overflow:hidden, div2 установит sh новый BF C, тогда мы можем прочитать:

Граничный блок таблицы, замещенный элемент уровня блока, o r элемент в нормальном потоке, который устанавливает новый контекст форматирования блока, не должен перекрывать поле поля любых чисел с плавающей запятой в тот же контекст форматирования блока, что и сам элемент . При необходимости реализации следует очистить указанный элемент, поместив его ниже любых предыдущих поплавков, , но может разместить его рядом с такими поплавками, если имеется достаточно места ref

Для простоты, когда элемент создает BF C, его содержимое больше не будет взаимодействовать с внешним миром . Из MDN вы можете прочитать:

Настройка overflow: auto создала новый BF C, содержащий число с плавающей запятой. Наш <div> теперь становится мини-макетом внутри нашего макета . Любой дочерний элемент будет содержаться внутри него.

...