Ответ 1

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

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

Подробнее Объяснение:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        beside the top div. Why? Because 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 
       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;
}

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

Что такое float точно и что он делает?

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

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

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

  Демонстрация

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

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

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

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

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

В приведенном выше примере мы будем плавать только в красных прямоугольниках, либо вы можете float как на left, либо можете float на left, а другое - на right, зависит от макета, если это 3 столбца, вы можете float 2 столбца на left, где это зависит от другого в right, хотя в этом примере мы имеем упрощенную компоновку с двумя столбцами, поэтому будет 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.

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

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

Столбец перемещен влево

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

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

Еще один colummn плавает вправо

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

По-прежнему родительский элемент свернут, ну, теперь исправить это. Существует множество способов предотвратить слияние родительского элемента.

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

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

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

Демо

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

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

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

Демо

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

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

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

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

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

Демо

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

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

Демо

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

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

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

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

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

Демо 2 (img размещено на left)

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

Поплавьте второй элемент, или используйте `margin`

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

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

Демо

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

ИЛИ

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

Ответ 2

Вам нужно добавить 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

Ответ 3

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

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

Устранение

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

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

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

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

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

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

Ответ 4

Из-за поплавка 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>

Демо

Ответ 5

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

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

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

<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>

Ответ 6

вы можете использовать свойство переполнения в 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;
    }

Ответ 7

использование <div style="clear: both;"></div> внизу всех ваших кодов, но выше </body></html>

Просто скопируйте и вставьте его

Будет работать префект