Такова природа вещей. Это надо принять и запомнить: плавающий блок выпадает из потока. Приходится предпринимать специальные усилия чтобы обволакивать его.
Так в том-то и дело, что внутри блока находятся как inline-блоки (label) так и обычные блоки (само поле ввода). И тем не менее окружающий блок имеет высоту ноль.
]]>Правда, как человеку, далекому от верстки, мне все равно непонятно, как так выходит, что у непустого блока высота становится нуливой.
]]>Используется Bootstrap 3. Есть такой код (блок-контейнер, естественно, есть, но не показан):
...
<div class="row">
<div class="col-xs-12 col-xs-offset-0">
<!-- Логин -->
<div class="form-group">
<label for="email" class="col-md-4 control-label">Логин</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" ...>
</div>
</div>
<!-- Пароль -->
<div class="form-group">
<label for="password" class="col-md-4 control-label">Пароль</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" ...>
</div>
</div>
...
Проблема в том, что блок(и) с классом form-group имеет размер 510x0, несмотря на то, что внутри него размещены элементы совсем не нулевых размеров по вертикали.
Видео: https://www.youtube.com/watch?v=LD_lK_UrsVg
Вопрос: почему так происходит? Как исправить? Ведь мне нужно чтобы между полями ввода был отступ (который подсвечивается желто-розовым цветом). И он есть, но только болтается сверху из-за того, что высота блока нулевая. А нужно, чтоб блок был размером с его содержимое.
UPD:
На всякий случай, полный код страницы: https://pastebin.com/CJtHAyGK