Анонимное пустое пространство между двумя divs

Вот сценарий,

У меня есть два divs один для заголовка, а другой для основного тела. Внутри div который для заголовка, у меня есть еще один div и этот div был floated left . Из-за этого floating пробела между этими двумя divs (между div для заголовка и div для основного тела).

[Примечание: см. #DivLogo в разделе css скрипки]

Мой вопрос в том, почему такая проблема поднимается из-за плавания.?

Это артефакт, когда ваш #DivHeader является inline-block . Измените его, чтобы display: block and set overflow: hidden; чтобы содержать поплавки. См. http://jsfiddle.net/jhcUb/

подать заявление

 float:left; 

в #DivHeader , чтобы содержать его потомков

Удалить

 position:relative; 

из #DivMain

смотреть скрипку

Почему поведение с встроенным блоком

Ваш оригинальный CSS выглядит следующим образом:

 #DivHeader { position:relative; display:inline-block; width:100%; font-family: Century Gothic, sans-serif; background-color:#3b5998; } 

Есть два дочерних элемента #DivHeader , один из них #DivHeader , а один абсолютно позиционируется и как таковой не вносит вклад в высоту #DivHeader .

Предположим, что вы установили display: block , вы бы увидели красный фон, окрашенный в верхнем левом углу страницы, и вы не увидите заголовок.

Это связано с тем, что вы устанавливаете #DivMain в position: relative , поэтому вы создали новый контекст стекирования, который нарисован поверх ранее отображаемых элементов.

Если вы установили position: static в #DivMain , вы увидите содержимое заголовка из плавающего элемента.

Итак, возвращаясь к #DivHeader , используя display: inline-block , элемент теперь распознает пробел в вашем документе HTML, создает анонимное встроенное поле, что означает, что у #DivHeader теперь есть контент. Поскольку после поплавка есть пробел, это означает, что клиренс, полученный в результате поплавка, вносит вклад в встроенный блок, и вы видите цвет фона и так далее.

Устранение проблемы достаточно просто, при overflow: auto DivHeader overflow: auto и display: block .

Еще одна вещь, если вы не плавали #DivLogo , вы не увидели бы проблему, потому что более крупные размеры шрифта в элементах логотипа переместили бы базовую линию настолько, чтобы белое пространство, распознанное встроенным блоком, не имело бы значения.

Довольно немного здесь!

Добавление top: -5px; to #DivMain решает вашу проблему !! 🙂

Смотрите здесь скрипку.

Взгляните на http://jsfiddle.net/y6hSV/3/

HTML

 
Some text to have layout

CSS

 html,body { margin:0; padding:0; } #DivHeader { float: left; width:100%; font-family: Century Gothic, sans-serif; background-color:#3b5998; } #DivLogo { position:relative; float:left; /*please remove this property and run*/ padding-bottom:10px; padding-top:10px } .Logo { margin-left:20px; margin-right:20px; color:#fff; } #SpLogo { font-size:35px; font-weight:bold; } #SpSlogan { font-size:20px; } #DivPrabhu{ float: right; margin-top: 30px; font-size:13px; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; } #DivPrabhu a{ text-decoration:none; color:#fff; margin-left:15px; } #DivPrabhu a:hover{ text-decoration:underline; } #DivMain{ height:600px; width; 100%; background-color:red; }