Высота контейнера CSS нуля ... почему не высота содержимого?

Question

Я не вижу вертикального пространства (заданного по краю 50 пикселей в линейном элементе) между элементами lineitem. Однако, если я добавлю что-то вроде height: 40px; в формате css в формате lineitem, тогда соблюдаются как высота, так и маржа. Почему строка не выводит высоты элементов ввода и метки и не добавляет поля к тому, что есть?

<div id="checkoutform"> 
<div class="lineitem"> 
<input type="text" name="EMAIL"> 
<label for="EMAIL">Your E-Mail:</label> 
</div> 

<div class="lineitem"> 
<input type="text" name="NAME"> 
<label for="NAME">Your Name:</label> 
</div> 
</div><!-- #checkoutform --> 

И CSS:

#checkoutform .lineitem { 
    margin:0px 15px 50px 0px; 
    clear:both; 
} 

#checkoutform label { 
    float: right; 
    text-align:right; 
    font-family:"Open Sans"; 
    font-weight:normal; 
    font-size:14px; 
} 

#checkoutform input { 
    width:280px; 
    float:right; 
    font-family:"Open Sans"; 
    font-weight:normal; 
    font-size:14px; 
} 

Answer 1

Добавить "Поплавок: левый" в .Строка-пункт

https://jsfiddle.net/q6ytv3tt/1/

#checkoutform .lineitem { 
 
    margin:0px 15px 50px 0px; 
 
    clear:both; 
 
    float:left; 
 

 

 
}

Answer 2

Это может иметь отношение к line-height содержимого вашего элемента (если вы установили его в другом месте). Все элементы в DOM и «по существу» отображаются как текст. Если у вас нет высоты, заданной для элемента, он предполагает высоту строки для вычисленной высоты, не обязательно высоту содержимого. Вы могли бы существенно «заставить» высоту .lineitem добавить элемент clearfix или добавить clear:both; к одному из его дочерних элементов.

Предлагаю посмотреть в этом направлении, поскольку кажется, что плавающий элемент как средство для макета не является принятой практикой.

Answer 3

Очень просто:

Вы должны очистить float S внутри .lineitem.

Добавить это в ваш css, это очищает поплавки с помощью элемента pseudo, без необходимости изменять ваш HTML.

#checkoutform .lineitem:after { 
    display: table; 
    clear: both; 
    content: ""; 
} 

Демо:https://jsfiddle.net/jrkph1ra/

Причина это работает:

плавал элементы выходят из нормального потока расчета высоты их контейнеров.

Элемент, который следует за флотируемыми элементами с помощью clear:both;, будет означать, что с левой или с правой стороны этого элемента не допускаются плавающие элементы, он перемещает край края элемента ниже края поля всех соответствующих поплавков, заставляя браузер должен учитывать высоту плавающих элементов в расчете высоты.

Этот элемент может быть псевдоэлементом родительского элемента плавающих элементов, поэтому модификация HTML не требуется.

«Очистка поплавков» является обычной практикой и проверено.

Если вы используете его часто, вы можете создать класс, например clearfix, и добавить этот класс ко всем соответствующим элементам.

.clearfix:after { 
    display: table; 
    clear: both; 
    content: ""; 
} 

Затем добавить .clearfix все соответствующие элементы с плавали детьми.

Демоhttps://jsfiddle.net/jrkph1ra/1/

display: table; против display:block;

Оба display: table; и display:block; будет генерировать элементы уровня блока, основное отличие состоит в том, что table будет расширяться только на ширину его содержания, в этом случае ширина 0, но block будет распространяться на ширину ее контейнера, поэтому использование table минимизирует площадь Этот метод.