it-swarm.com.ru

Почему высота элемента контейнера не увеличивается, если он содержит плавающие элементы?

Я хотел бы спросить, как работают высота и поплавок. У меня есть внешний div и внутренний div, в котором есть содержание. Его высота может варьироваться в зависимости от содержимого внутреннего блока, но кажется, что мой внутренний блок переполнит его внешний блок. Каков был бы правильный способ сделать это?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
            <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>
189
Boy Pasmo

Плавающие элементы не увеличивают высоту элемента контейнера, и поэтому, если вы их не очистите, высота контейнера не увеличится ...

Я покажу вам визуально:

enter image description here

enter image description here

enter image description here

Более объяснение:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

Вы также можете добавить overflow: hidden; к элементам контейнера, но я бы посоветовал вам использовать clear: both; вместо этого.

Также, если вы хотите очистить элемент, вы можете использовать

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

Как работает CSS Float?

Что такое float и для чего он нужен?

  • Свойство float неправильно понимается большинством начинающих. Ну, что именно делает float? Первоначально свойство float было введено для обтекания текста вокруг изображений, которые плавают left или right. Вот еще одно объяснение @Madara Uchicha.

    Итак, неправильно ли использовать свойство float для размещения боксов рядом? Ответ нет ; Нет проблем, если вы используете свойство float для установки боксов рядом.

  • Плавающий элемент уровня inline или block заставит элемент вести себя как элемент inline-block.

    Демонстрация
  • Если вы перемещаете элемент left или right, width элемента будет ограничен содержимым, которое он содержит, если width не определено явно ...

  • Вы не можете float элемент center. Это самая большая проблема, которую я всегда видел у начинающих, используя float: center;, что не является допустимым значением для свойства float. float обычно используется для float/перемещения содержимого в самое влево или в самое вправо . Существует только четыре допустимых значения для свойства float, т.е. left, right, none (по умолчанию) и inherit.

  • Родительский элемент сворачивается, когда он содержит всплывающие дочерние элементы, чтобы предотвратить это, мы используем свойство clear: both;, чтобы очистить всплывающие элементы с обеих сторон, что предотвратит сворачивание родительского элемента. Для получения дополнительной информации, вы можете сослаться на мой другой ответ здесь .

  • (Важно) Подумайте об этом, когда у нас есть стек различных элементов. Когда мы используем float: left; или float: right;, элемент перемещается над стеком на единицу. Следовательно, элементы в нормальном потоке документов будут скрываться за плавающими элементами, потому что он находится на уровне стека выше обычных плавающих элементов. (Пожалуйста, не связывайте это с z-index, поскольку это совершенно другое.)


В качестве примера рассмотрим пример работы CSS-плавающих элементов. Предположим, нам нужен простой макет из 2 столбцов с верхним, нижним и нижним колонтитулами, поэтому вот как выглядит план ...

enter image description here

В приведенном выше примере мы будем перемещать только красные поля, либо вы можете float и в left, либо вы можете float в left, а также в right, в зависимости от макета, если это 3 столбца, вы можете float 2 столбца в left, где другой зависит от right, так как в этом примере мы имеем упрощенный макет из 2 столбцов, поэтому будет float один - left, а другой - right.

Разметка и стили для создания макета описаны ниже ...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

Давайте пошагово рассмотрим макет и посмотрим, как работает float.

Прежде всего, мы используем основной элемент-обертку, вы можете просто предположить, что это ваш видовой экран, затем мы используем header и присваиваем height из 50px, так что ничего особенного там нет. Это просто обычный элемент уровня блока без плавающего, который будет занимать горизонтальное пространство 100%, если он не является плавающим или мы не присвоим ему inline-block.

Первое допустимое значение для float - это left, поэтому в нашем примере мы используем float: left; для .floated_left, поэтому мы намереваемся переместить блок в left нашего элемента контейнера.

колонка всплыла влево

И да, если вы видите, родительский элемент, который .wrapper свернут, тот, который вы видите с зеленой рамкой, не расширился, но должен ли это быть? Вернемся к этому через некоторое время, а пока у нас есть столбец с плавающей точкой left.

Переходя ко второму столбцу, пусть он float этот к right

еще один столбец всплыл вправо

Здесь у нас есть широкий столбец 300px, который мы float помещаем в right, который будет располагаться рядом с первым столбцом, поскольку он перемещается в left, и, поскольку он перемещен в left, он создал пустой Gutter для right, и поскольку пространства на right, наш плавающий элемент right находился рядом с элементом left.

Тем не менее, родительский элемент свернут, давайте исправим это сейчас. Есть много способов предотвратить сворачивание родительского элемента.

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

Добавьте <div style="clear: both;"></div> до окончания .wrapperdiv, например

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

Что ж, это исправляет очень хорошо, больше не свернутый родительский элемент, но он добавляет ненужную разметку в DOM, поэтому некоторые предлагают использовать overflow: hidden; для родительского элемента, содержащего плавающие дочерние элементы, которые работают по назначению.

Используйте overflow: hidden; на .wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Demo

Это экономит нам элемент каждый раз, когда нам нужно clearfloat, но, поскольку я тестировал различные случаи с этим, в одном конкретном случае произошел сбой, который использует box-shadow на дочерних элементах.

Демонстрация (Невозможно увидеть тень со всех четырех сторон, overflow: hidden; вызывает эту проблему)

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

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Demo

Здесь тень работает как задумано, также она самостоятельно очищает родительский элемент, который предотвращает свертывание.

И наконец, мы используем нижний колонтитул после того, как мы clear плавающие элементы.

Demo


Когда в любом случае используется float: none;, так как он используется по умолчанию, поэтому любое использование для объявления float: none;?

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


Несколько реальных примеров того, как float полезен.

  • Первый пример, который мы уже видели, - это создание одного или нескольких макетов столбцов.
  • Использование img плавало внутри p, что позволит нашему контенту обтекать.

Демо (без плавающего img)

Демонстрация 2 (img передана в left)

  • Использование float для создания горизонтального меню - Demo

Также поплавайте второй элемент или используйте `margin`

И последнее, но не менее важное, я хочу объяснить этот конкретный случай, когда вы float только один элемент для left, но вы не float другой, так что происходит?

Предположим, что если мы удалим float: right; из нашего .floated_rightclass, div будет отображаться с экстремального left, поскольку он не является плавающим.

Demo

Так что в этом случае вы можете float и left тоже

OR

Вы можете использовать margin-left, который будет равен размеру левого плавающего столбца, т.е. ширины 200px .

556
Mr. Alien

Вам нужно добавить overflow:auto к вашему родительскому div, чтобы он охватывал внутренний перемещаемый div:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

пример jsFiddle

35
j08691

Вы столкнулись с ошибкой float (хотя я не уверен, технически ли это ошибка из-за того, как много браузеров демонстрируют такое поведение). Вот что происходит:

При нормальных обстоятельствах, предполагая, что явная высота не была установлена, элемент уровня блока, такой как div, будет устанавливать свою высоту на основе своего содержимого. Нижняя часть родительского div будет выходить за пределы последнего элемента. К сожалению, плавающий элемент мешает родительскому элементу учитывать плавающий элемент при определении его высоты. Это означает, что если ваш последний элемент является плавающим, он не будет "растягивать" родительский элемент так же, как обычный элемент.

Клиринг

Есть два распространенных способа исправить это. Первый - добавить элемент "очистки"; то есть еще один элемент ниже плавающего, который заставит родителя растягиваться. Поэтому добавьте следующий html как последний дочерний элемент:

<div style="clear:both"></div>

Он не должен быть видимым, и, используя clear: both, вы убедитесь, что он будет располагаться не рядом с плавающим элементом, а после него.

Переполнение:

Второй метод, который предпочитают большинство людей (я думаю), состоит в том, чтобы изменить CSS родительского элемента так, чтобы переполнение было совсем не "видимым". Таким образом, установка переполнения на "скрытый" заставит родителя вытягиваться за дно плавающего потомка. Это верно только в том случае, если вы не установили высоту для родителя, конечно.

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

8
Maloric

Это из-за плавания div. Добавьте overflow: hidden на внешний элемент.

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Демо

2
Starx

Вы путаете, как браузеры отображают элементы, когда есть плавающие элементы. Если один элемент блока является плавающим (ваш внутренний блок в вашем случае), другие элементы блока будут игнорировать его, потому что браузер удаляет плавающие элементы из обычного потока веб-страницы. Затем, поскольку плавающий элемент div был удален из обычного потока, внешний элемент div заполняется, как будто внутреннего элемента div нет. Однако встроенные элементы (изображения, ссылки, текст, черные кавычки) будут соблюдать границы плавающего элемента. Если вы введете текст во внешний div, текст будет размещен вокруг внутреннего div.

Другими словами, блочные элементы (заголовки, абзацы, div и т.д.) Игнорируют плавающие элементы и заполняют, а встроенные элементы (изображения, ссылки, текст и т.д.) Учитывают границы плавающих элементов.

Пример скрипки здесь

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>
2
Alejandro Ruiz Arias

если вам нужно, чтобы ваши дочерние элементы перемещались влево, я рекомендую приведенный ниже код вашему родительскому элементу.

.parent_div{
    display: flex;
}
0
Y. Alimatov

вы можете использовать свойство overflow для контейнера div, если у вас нет div для показа поверх контейнера, например:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

Вот следующий CSS:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------ИЛИ ЖЕ-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

Вот следующий CSS:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }
0
Nishant Rana