Почему высота моего div равна нулю

У меня есть следующее в моем CSS. Все поля /отступы /границы глобально сбрасываются на 0.

 #wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

Теперь, когда я пишу свой HTML как

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

страница отображается правильно. Однако, когда я проверяю элементы, div#wrapper отображается как 0px высоко Я бы ожидал, что он расширится до конца div.content и div.lbar ... Почему это происходит?

Опять же, страница отображается нормально. Такое поведение просто сбивает меня с толку.

104 голоса | спросил user564376 20 MarpmSun, 20 Mar 2011 19:57:15 +03002011-03-20T19:57:15+03:0007 2011, 19:57:15

3 ответа


0

Плавающее содержимое не влияет на высоту его контейнера. Элемент не содержит содержимого, которое не является плавающим (поэтому ничто не останавливает высоту контейнера, равную 0, как если бы он был пустым).

Установка overflow: hidden в контейнере позволит избежать этого, установив новый контекст форматирования блока . См. методы для размещения поплавков для других методы и содержащие плавающие элементы для объяснения того, почему CSS был разработан таким образом.

ответил Quentin 20 MarpmSun, 20 Mar 2011 19:59:37 +03002011-03-20T19:59:37+03:0007 2011, 19:59:37
0

Обычно float не учитываются в макете их родителей.

Чтобы предотвратить это, добавьте overflow: hidden к родителю.

ответил SLaks 20 MarpmSun, 20 Mar 2011 20:00:03 +03002011-03-20T20:00:03+03:0008 2011, 20:00:03
0

Я не уверен, что это правильный путь, но я решил эту проблему, добавив display: inline-block; в div обертки.

 #wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}
ответил Melih 13 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 13 Sep 2017 13:32:39 +0300 2017, 13:32:39

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132