Когда использую float, теряется высота родителя

#css #float

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

Пример:



.parent {
  width: 162px;
  border: 2px solid red;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}

  

  

  






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

Ответы

Ответ 1

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

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


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



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

  

  

  





Самый распространённый вариант ― 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;
}
С элементом:


  

  

  

  
  



С псевдоэлементом:


  

  

  





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



.parent {
  width: 162px;
  border: 2px solid red;
  /* Float */
  float: left;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}

  

  

  





И последний вариант ― указать родителю 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;
}