Путаница с высотой: авто

Question

В следующем сценарии я не понимаю, почему высота элементов wrapper и content настроена неправильно, даже если они установлены в height: auto, что означает, что 2 divs с оболочкой класса не отображаются внутри оболочки и содержимое div.

Я воссоздал проблему в этом JSfiddle:

http://jsfiddle.net/202oy3k8/

СОС вы можете увидеть две оранжевые дивы не отображаются внутри обертки дивы, даже если высота обертка установлен автоматический режим. Что вызывает эту проблему и как я могу ее исправить?

HTML КОД:

<div id="wrapper"> 
    <div id="content"> 
     <div id="top"> 

     </div> 
     <div class="dash"></div> 
     <p id="header">Header</p> 

     <div class="wrap"> 
     </div> 
     <div class="wrap"> 
     </div> 
    </div> 
</div 

CSS КОД:

html, body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#wrapper { 
    background-color: black; 
    margin-top: 2%; 
    width: 100%; 
    height: auto; 
} 

#content { 
    background-color: green; 
    width: 1224px; 
    height: auto; 
    margin: auto; 
    text-align: center;  
} 

#top { 
    background-color: pink; 
    height: 400px; 
    width: 60%; 
    margin: auto; 
} 

.dash { 
    width: 80%; 
    margin: auto; 
    margin-bottom: 1%; 
    height: 2px; 
    background-color: black; 
} 

p#header { 
    margin: 0; 
    text-align: center; 
} 

.wrap { 
    background-color: orange; 
    margin: 1%; 
    float:left; 
    width: 48%; 
    height: 400px; 
} 

Answer 1

Вы должны добавить clear свойство, чтобы очистить левый поплавок, примененные к .wrap дивы.

Что плавают и чисты?

Если вы посмотрите в типичном журнале, вы увидите изображения, иллюстрирующие статьи , с текстом, проходящим вокруг них. Свойство float в CSS было создано, чтобы разрешить этот стиль макета на веб-страницах. Плавающий изображение или любой другой элемент в этом случае подталкивает его в одну сторону, а позволяет передавать текст с другой стороны. Очистка плавающего элемента означает, что , при необходимости, отталкивает его, чтобы предотвратить его появление рядом с поплавком. Хотя плавание предназначалось для использования с любыми элементами, дизайнеры наиболее используют его для достижения многоколоночных макетов без необходимости злоупотреблять табличной разметкой.

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#wrapper { 
 
    background-color: black; 
 
    margin-top: 2%; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
#content { 
 
    background-color: green; 
 
    width: 400px; 
 
    height: auto; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
#top { 
 
    background-color: pink; 
 
    height: 400px; 
 
    width: 60%; 
 
    margin: auto; 
 
} 
 
.dash { 
 
    width: 80%; 
 
    margin: auto; 
 
    margin-bottom: 1%; 
 
    height: 2px; 
 
    background-color: black; 
 
} 
 
p#header { 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    background-color: orange; 
 
    margin: 1%; 
 
    float: left; 
 
    width: 48%; 
 
    height: 400px; 
 
} 
 
.clear { 
 
    clear: left; 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
    <div id="top"></div> 
 
    <div class="dash"></div> 
 
    <p id="header">Header</p> 
 
    <div class="wrap"></div> 
 
    <div class="wrap"></div> 
 
    <div class="clear"></div> 
 
    </div> 
 
    </div

Ссылка: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?