Зачем нужен атрибут clear в CSS?

Question

Зачем нужен clear в CSS? А также зачем нужен отдельный блок .clearfix? С float я разобрался, чтоб картинку текст обтекал, а зачем нужен атрибут clear: both; или другие его значения я не могу разобраться. Просьба помочь

Answer 1

если использовать float то есть обтекание то в том случае если высота родительского блока автоматическая за счёт содержимого и у внутренних блоко есть свойство float: left или float: right то высота его схлопнется то есть станет равна 0 и для того что бы очистить обтекание применяют clearfix то есть очистка потока ...clear: both но такая нужда пропала с появлением flexbox и float остался актуальным только для обтекания текстом изображений

Вот этот пример показывает что высота item равна 0

.item {
  border: 1px solid red;
}

.item-outer {
  width: 50px;
  height: 50px;
  background: blue;
  float: left
}

p {
  float: right;
}

<div class="item">
  <div class="item-outer"></div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus optio porro voluptates iure facere, nesciunt obcaecati, aliquam laudantium, minima consectetur provident quasi deserunt voluptatum veniam sit adipisci. Architecto quaerat saepe placeat
    ipsa sed, sequi dolor suscipit! Iure a itaque nostrum porro earum quibusdam. Fuga laboriosam officiis recusandae sequi in aliquam dolorum accusamus doloribus qui veritatis odio similique consequatur explicabo, magni vitae. Nihil vel provident voluptas
    optio sapiente autem rerum facilis distinctio et atque delectus dolorum, ab quod neque omnis ea unde mollitia quisquam id? Consequatur, earum dolore unde esse distinctio aspernatur sunt, tempora fuga quisquam architecto accusamus ducimus impedit excepturi.
  </p>
</div>

А вот в этом примере я применял некий clear и смотрите что стало с родителем

.item {
  border: 1px solid red;
}

.item-outer {
  width: 50px;
  height: 50px;
  background: blue;
  float: left
}

p {
  float: right;
}

.clear,
.clear:after {
  content: "";
  display: block;
  clear: both
}

<div class="item clear">
  <div class="item-outer"></div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus optio porro voluptates iure facere, nesciunt obcaecati, aliquam laudantium, minima consectetur provident quasi deserunt voluptatum veniam sit adipisci. Architecto quaerat saepe placeat
    ipsa sed, sequi dolor suscipit! Iure a itaque nostrum porro earum quibusdam. Fuga laboriosam officiis recusandae sequi in aliquam dolorum accusamus doloribus qui veritatis odio similique consequatur explicabo, magni vitae. Nihil vel provident voluptas
    optio sapiente autem rerum facilis distinctio et atque delectus dolorum, ab quod neque omnis ea unde mollitia quisquam id? Consequatur, earum dolore unde esse distinctio aspernatur sunt, tempora fuga quisquam architecto accusamus ducimus impedit excepturi.
  </p>
</div>

БЛОГ НА HUSL

Зачем нужен атрибут clear в CSS?

Ответы (1 шт):