CSS: плавающие divs имеют 0 высоту

Я пытаюсь разместить 2 div бок о бок внутри другого div, так что у меня может быть 2 столбца текста, а внешний div - граница вокруг них:

HTML

<div id="outer">
    <div id="left">
         ...
    <div id="right">
</div>

CSS

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}

Однако внешний div регистрирует высоту 0px, и поэтому граница не обходит другие div. Как заставить внешний div распознавать высоты вещей внутри него?

Ответ 1

Это не потому, что плавающие divs не имеют высоты, потому что плавающие divs не влияют на размер родительского элемента.

Вы можете использовать стиль overflow, чтобы родительский элемент учитывал плавающие элементы:

#outer { overflow: auto; }

Ответ 2

Есть несколько решений этой проблемы:

#outer: overflow: hidden;

или добавить некоторый не отображаемый контент во внешний div, который появляется после плавающих div, которые затем добавляются в clear: оба правила стиля.

Вы также можете добавить через css: после псевдоэлемента вставить содержимое после тех div, которые вы затем примените ясно: оба - это имеет то преимущество, что не требует дополнительной разметки.

Мое предпочтение - это первое.

Ответ 3

Вы можете очистить float, вставив элемент после плавающих элементов, у которого есть свойство clear, примененное к нему, поскольку плавающие дочерние элементы приводят к тому, что родитель имеет высоту 0, так как они не занимают высоту поплавковых детей в рассмотрение.

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div class="clear"></div> 
</div>

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}
.clear{ clear: both; }

Ответ 4

Попробуйте следующее:

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div style="clear:both"></div>
</div>

Ответ 5

добавить переполнение: скрыто; к главному div.

<style type="text/css">
#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
overflow: hidden;
border: 1px solid green;
}

#left{ 
    float:left;
border: 1px solid red;
}

#right{
    width:500px;
    float:right;
border: 1px solid yellow;
}
</style>

Ответ 6

Вы также должны плавать внешний div. Div, которые содержат floatet div и которые не плавают сами, обрушиваются.

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
    float:left;
}

#left{
    float:left;
    width:300px;
}

#right{
    width:500px;
    float:right;
}

Ответ 7

Как это сделать:

<style type="text/css">
#outer{
   background-color:rgba(255,255,255,.5);
   width:800px;
   border:thin solid #000000;
   height:300px;
   margin:5px;
   padding:10px;
}

#left{
   float:left;
   border:thin dashed #000000;
   width:385px;
   height:100px;
   margin:5px;
}

#right{
   width:385px;
   float:left;
   border:thin dashed #000000;
   height:100px;
   margin:5px;
}
</style>

<div id="outer">
   <div id="left">
   </div>
        ...
   <div id="right">
</div>
</div>

Ответ 8

если div внутри родителя плавает, он больше не является частью родительского div: проверьте его, проверив родительский элемент. Чтобы исправить вашу проблему, существует два метода: 1) сделайте пустой div в конце внутри родительского класса как .blank все следующие css

.blank:after{
        content: "";
        clear:both;
        display:block;
    }

Или 2) дать родительскому классу .clear-fix и добавить css

.clearfix:after {
content: "";
clear: both;
display: block;

} он даст родительской высоте, равной содержимому