плавучих элементов и CSS Fackge Color

В веб -разработке элементы стиля с CSS могут быть проблемой, когда вы встречаете сценарии, включающие плавающие элементы. Это может возникнуть, когда элементы удаляются из нормального потока документа, используя свойство «float», что приводит к вопросам с размерами родительского элемента и цветами фона.

рассмотрим следующий упрощенный сценарий, когда два DIV, «левые» и «справа», плавают в родительском содержании 'Div. Мы назначаем каждому Div цвет фона: красный для родителей и зеленого и желтого для плавучих элементов.

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
}

.left {
    float: left;
    height: 300px;
    background: green;
}

.right {
    float: right;
    background: yellow;
}

возникает вопрос, что когда контент «правого» div расширяется, он не заставляет родительский контент «содержание» соответствующим образом расширяться. Вместо этого родительский диг падает. Это приводит к тому, что красный фон был скрыт.

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

решение заключается в том, чтобы инструктировать родителя учитывать своих плавающих детей, заставляя его сдерживать их. Это может быть достигнуто, добавив свойство «переполнения» в родительский элемент. Допустимые значения для «переполнения» включают «скрытые» и «Auto»:

.content {
    overflow: hidden;  // or overflow: auto;
}

] Применение любого значения к «контенту» в нашем примере исправят проблему с разрупкой, что позволяет родителю расширяться в соответствии с его размером контента, разоблачая весь красный фон. переполнение: скрыто; ... }

.content {
    overflow: hidden;
    ...
}