3

Встретился с проблемой: когда у всех дочерних элементов указал float, то у родителя потерялась высота, т.е. ушла в 0px.

Пример:

.parent {
  width: 162px;
  border: 2px solid red;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

Почему родитель перестал учитывать высоту дочерних элементов? Как исправить?

1 ответ 1

5

Родитель перестал учитывать высоту дочерних элеметов потом, что элементы с float создают новый контекст наложения и выпадают из потока элементов.

Есть четыре варианта решения вашего вопроса:

  1. Если у всех дочерних элементов фиксированная высота, то и у родителя указываем фиксированную высоту:

    .parent {
      width: 162px;
      border: 2px solid red;
      /* Фиксированная высота */
      height: 54px;
    }
    .children {
      width: 50px;
      height: 50px;
      border: 2px solid blue;
      float: left;
    }
    <div class="parent">
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
    </div>

  2. Самый распространённый вариант ― clearfix. Создаём отдельный элемент или псевдоэлемент со стилем cler: both;:

    .parent {
      width: 162px;
      border: 2px solid red;
    }
    .children {
      width: 50px;
      height: 50px;
      border: 2px solid blue;
      float: left;
    }
    
    /* Clearfix */
    .clearfix {
      display: table;
      clear: both;
      visibility: hidden;
    }
    
    .parent.b:after {
      content: '';
      display: table;
      clear: both;
      visibility: hidden;
    }
    <p>С элементом:</p>
    
    <div class="parent a">
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      
      <div class="clearfix"></div>
    </div>
    
    <p>С псевдоэлементом:</p>
    
    <div class="parent b">
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
    </div>

  3. Один из самых интересных, но недейственных вариантов ― указать родителю float и тогда он тоже выпадет из общего потока и "соединится" с дочерними элементами:

    .parent {
      width: 162px;
      border: 2px solid red;
      /* Float */
      float: left;
    }
    .children {
      width: 50px;
      height: 50px;
      border: 2px solid blue;
      float: left;
    }
    <div class="parent">
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
    </div>

  4. И последний вариант ― указать родителю overflow. Overflow создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён. Подробнее...

    .parent {
      width: 162px;
      border: 2px solid red;
      /* Overflow */
      overflow: auto;
      /* Можно устанавливать следущие значения:
         auto, hidden, overlay, scroll
      */
    }
    .children {
      width: 50px;
      height: 50px;
      border: 2px solid blue;
      float: left;
    }
    <div class="parent">
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.