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

<p>я хотел бы спросить, как работают высота и поплавок. у меня есть внешний div и внутренний div, в котором есть содержание. его высота может варьироваться в зависимости от содержимого внутреннего блока, но кажется, что мой внутренний блок переполнит его внешний блок. каков был бы правильный способ сделать это?</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <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></code></pre></div> </div>

<p>плавающие элементы не увеличивают высоту элемента контейнера, и поэтому, если вы их не очистите, высота контейнера не увеличится ...</p><p>я покажу вам визуально:</p><p><img src="https://i.stack.imgur.com/jslai.jpg" alt="enter image description here"></p><p><img src="https://i.stack.imgur.com/n3rmw.jpg" alt="enter image description here"></p><p><img src="https://i.stack.imgur.com/7wq0g.jpg" alt="enter image description here"></p><p>более объяснение:</p><pre><code><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> </code></pre><p>вы также можете добавить <code>overflow: hidden;</code> к элементам контейнера, но я бы посоветовал вам использовать <code>clear: both;</code> вместо этого.</p><p>также, если вы хотите очистить элемент, вы можете использовать</p><pre><code>.self\_clear:after { content: ""; clear: both; display: table; } </code></pre><hr><h1>как работает css float?</h1><h2>что такое float и для чего он нужен?</h2><ul> <li> <p>свойство <code>float</code> неправильно понимается большинством начинающих. ну, что именно делает <code>float</code>? первоначально свойство <code>float</code> было введено для обтекания текста вокруг изображений, которые плавают <code>left</code> или <code>right</code>. <a href="https://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#comment26828942\_12871734">вот еще одно объяснение</a> @madara uchicha.</p> <p>итак, неправильно ли использовать свойство <code>float</code> для размещения боксов рядом? ответ <strong> нет </strong>; нет проблем, если вы используете свойство <code>float</code> для установки боксов рядом.</p> </li> <li> <p>плавающий элемент уровня <code>inline</code> или <code>block</code> заставит элемент вести себя как элемент <code>inline-block</code>.</p> <a href="http://jsfiddle.net/w3gjm/"><strong> демонстрация </strong></a> </li> <li> <p>если вы перемещаете элемент <code>left</code> или <code>right</code>, <code>width</code> элемента будет ограничен содержимым, которое он содержит, если <code>width</code> не определено явно ...</p> </li> <li> <p>вы не можете <code>float</code> элемент <code>center</code>. это самая большая проблема, которую я всегда видел у начинающих, используя 
<code>float: center;</code>
, что не является допустимым значением для свойства <code>float</code>. <code>float</code> обычно используется для <code>float</code>/перемещения содержимого в самое <em> влево </em> или в самое <em> вправо </em>. существует только <em> четыре </em> допустимых значения для свойства <code>float</code>, т.е. <code>left</code>, <code>right</code>, <code>none</code> (по умолчанию) и <code>inherit</code>.</p> </li> <li> <p>родительский элемент сворачивается, когда он содержит всплывающие дочерние элементы, чтобы предотвратить это, мы используем свойство <code>clear: both;</code>, чтобы очистить всплывающие элементы с обеих сторон, что предотвратит сворачивание родительского элемента. для получения дополнительной информации, вы можете сослаться на мой другой ответ <a href="https://stackoverflow.com/a/12871734/1542290">здесь</a> .</p> </li> <li> <p><strong> (важно) </strong> подумайте об этом, когда у нас есть стек различных элементов. когда мы используем <code>float: left;</code> или <code>float: right;</code>, элемент перемещается над стеком на единицу. следовательно, элементы в нормальном потоке документов будут скрываться за плавающими элементами, потому что он находится на уровне стека выше обычных плавающих элементов. <strong> (пожалуйста, не связывайте это с <code>z-index</code>, поскольку это совершенно другое.) </strong></p> </li> </ul><hr><p>в качестве примера рассмотрим пример работы css-плавающих элементов. предположим, нам нужен простой макет из 2 столбцов с верхним, нижним и нижним колонтитулами, поэтому вот как выглядит план ...</p><p><img src="https://i.stack.imgur.com/f8vg2.jpg" alt="enter image description here"></p><p>в приведенном выше примере мы будем перемещать только красные поля, либо вы можете <code>float</code> и в <code>left</code>, либо вы можете <code>float</code> в <code>left</code>, а также в <code>right</code>, в зависимости от макета, если это 3 столбца, вы можете <code>float</code> 2 столбца в <code>left</code>, где другой зависит от <code>right</code>, так как в этом примере мы имеем упрощенный макет из 2 столбцов, поэтому будет <code>float</code> один - <code>left</code>, а другой - <code>right</code>.</p><p>разметка и стили для создания макета описаны ниже ...</p><pre><code><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; } </code></pre><p>давайте пошагово рассмотрим макет и посмотрим, как работает float.</p><p>прежде всего, мы используем основной элемент-обертку, вы можете просто предположить, что это ваш видовой экран, затем мы используем <code>header</code> и присваиваем <code>height</code> из <code>50px</code>, так что ничего особенного там нет. это просто обычный элемент уровня блока без плавающего, который будет занимать горизонтальное пространство <code>100%</code>, если он не является плавающим или мы не присвоим ему <code>inline-block</code>.</p><p>первое допустимое значение для <code>float</code> - это <code>left</code>, поэтому в нашем примере мы используем <code>float: left;</code> для <code>.floated\_left</code>, поэтому мы намереваемся переместить блок в <code>left</code> нашего элемента контейнера.</p><p> <a href="http://jsfiddle.net/lmk9s/">колонка всплыла влево</a> </p><p>и да, если вы видите, родительский элемент, который <code>.wrapper</code> свернут, тот, который вы видите с зеленой рамкой, не расширился, но должен ли это быть? вернемся к этому через некоторое время, а пока у нас есть столбец с плавающей точкой <code>left</code>.</p><p>переходя ко второму столбцу, пусть он <code>float</code> этот к <code>right</code></p><p> <a href="http://jsfiddle.net/lmk9s/1/">еще один столбец всплыл вправо</a> </p><p>здесь у нас есть широкий столбец <code>300px</code>, который мы <code>float</code> помещаем в <code>right</code>, который будет располагаться рядом с первым столбцом, поскольку он перемещается в <code>left</code>, и, поскольку он перемещен в <code>left</code>, он создал пустой gutter для <code>right</code>, и поскольку пространства на <code>right</code>, наш плавающий элемент <code>right</code> находился рядом с элементом <code>left</code>.</p><p>тем не менее, родительский элемент свернут, давайте исправим это сейчас. есть много способов предотвратить сворачивание родительского элемента.</p><ul> <li>добавьте пустой элемент уровня блока и используйте <code>clear: both;</code> до окончания родительского элемента, который содержит плавающие элементы, теперь этот является дешевым решением для <code>clear</code> ваших плавающих элементов, которые будут выполнять эту работу за вас, но я бы рекомендовал не использовать это.</li> </ul><p>добавьте <code><div style="clear: both;"></div></code> до окончания <code>.wrapper</code> <code>div</code>, например</p><pre><code><div class="wrapper clear"> <!-- floated columns --> <div style="clear: both;"></div> </div> </code></pre><p> <a href="http://jsfiddle.net/lmk9s/2/"><strong> demo </strong></a> </p><p>что ж, это исправляет очень хорошо, больше не свернутый родительский элемент, но он добавляет ненужную разметку в dom, поэтому некоторые предлагают использовать <code>overflow: hidden;</code> для родительского элемента, содержащего плавающие дочерние элементы, которые работают по назначению.</p><p>используйте <code>overflow: hidden;</code> на <code>.wrapper</code></p><pre><code>.wrapper { border: 3px solid green; overflow: hidden; } </code></pre><p> <a href="http://jsfiddle.net/lmk9s/3/"><strong> demo </strong></a> </p><p>это экономит нам элемент каждый раз, когда нам нужно <code>clear</code> <code>float</code>, но, поскольку я тестировал различные случаи с этим, в одном конкретном случае произошел сбой, который использует <code>box-shadow</code> на дочерних элементах.</p><p> <a href="http://jsfiddle.net/lmk9s/4/"><strong> демонстрация </strong></a> (невозможно увидеть тень со всех четырех сторон, <code>overflow: hidden;</code> вызывает эту проблему)</p><p>и что теперь? сохраните элемент, без <code>overflow: hidden;</code>, так что займитесь явным исправлением, используйте приведенный ниже фрагмент кода в своем css, и точно так же, как вы используете <code>overflow: hidden;</code> для родительского элемента, вызовите <code>class</code> ниже для родительского элемента для самоочистки.</p><pre><code>.clear:after { clear: both; content: ""; display: table; } <div class="wrapper clear"> <!-- floated elements --> </div> </code></pre><p> <a href="http://jsfiddle.net/lmk9s/5/"><strong> demo </strong></a> </p><p>здесь тень работает как задумано, также она самостоятельно очищает родительский элемент, который предотвращает свертывание.</p><p>и наконец, мы используем нижний колонтитул после того, как мы <code>clear</code> плавающие элементы.</p><p> <a href="http://jsfiddle.net/lmk9s/6/"><strong> demo </strong></a> </p><hr><p>когда в любом случае используется <code>float: none;</code>, так как он используется по умолчанию, поэтому любое использование для объявления <code>float: none;</code>?</p><p>ну, это зависит от того, если вы собираетесь использовать адаптивный дизайн, вы будете использовать это значение много раз, когда вы хотите, чтобы ваши плавающие элементы отображались один под другим с определенным разрешением. для этого важную роль играет свойство <code>float: none;</code>.</p><hr><p>несколько реальных примеров того, как <code>float</code> полезен.</p><ul> <li>первый пример, который мы уже видели, - это создание одного или нескольких макетов столбцов.</li> <li>использование <code>img</code> плавало внутри <code>p</code>, что позволит нашему контенту обтекать.</li> </ul><p> <a href="http://jsfiddle.net/xzpx7/"><strong> демо </strong></a> (без плавающего <code>img</code>)</p><p> <a href="http://jsfiddle.net/xzpx7/1/"><strong> демонстрация 2 </strong></a> (<code>img</code> передана в <code>left</code>)</p><ul> <li>использование <code>float</code> для создания горизонтального меню - <a href="http://jsfiddle.net/xzpx7/2/"><strong> demo </strong></a> </li> </ul><hr><h3>также поплавайте второй элемент или используйте `margin`</h3><p>и последнее, но не менее важное, я хочу объяснить этот конкретный случай, когда вы <code>float</code> только один элемент для <code>left</code>, но вы не <code>float</code> другой, так что происходит?</p><p>предположим, что если мы удалим <code>float: right;</code> из нашего <code>.floated\_right</code> <code>class</code>, <code>div</code> будет отображаться с экстремального <code>left</code>, поскольку он не является плавающим.</p><p> <a href="http://jsfiddle.net/lmk9s/7/"><strong> demo </strong></a> </p><p>так что в этом случае вы можете <a href="http://jsfiddle.net/lmk9s/8/"><code>float</code> и <code>left</code> тоже</a> </p><p>or</p><p>вы можете <a href="http://jsfiddle.net/lmk9s/9/">использовать <code>margin-left</code>, который будет равен размеру левого плавающего столбца, т.е. ширины <code>200px</code></a> .</p>

<p>вам нужно добавить <code>overflow:auto</code> к вашему родительскому div, чтобы он охватывал внутренний перемещаемый div:</p><pre><code><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> </code></pre><p><strong> <a href="http://jsfiddle.net/j08691/6bu8d/">пример jsfiddle</a> </strong></p>

<p>вы столкнулись с ошибкой float (хотя я не уверен, технически ли это ошибка из-за того, как много браузеров демонстрируют такое поведение). вот что происходит:</p><p>при нормальных обстоятельствах, предполагая, что явная высота не была установлена, элемент уровня блока, такой как div, будет устанавливать свою высоту на основе своего содержимого. нижняя часть родительского div будет выходить за пределы последнего элемента. к сожалению, плавающий элемент мешает родительскому элементу учитывать плавающий элемент при определении его высоты. это означает, что если ваш последний элемент является плавающим, он не будет "растягивать" родительский элемент так же, как обычный элемент.</p><p><strong>клиринг</strong></p><p>есть два распространенных способа исправить это. первый - добавить элемент "очистки"; то есть еще один элемент ниже плавающего, который заставит родителя растягиваться. поэтому добавьте следующий html как последний дочерний элемент:</p><pre><code><div style="clear:both"></div> </code></pre><p>он не должен быть видимым, и, используя clear: both, вы убедитесь, что он будет располагаться не рядом с плавающим элементом, а после него.</p><p><strong>переполнение:</strong></p><p>второй метод, который предпочитают большинство людей (я думаю), состоит в том, чтобы изменить css родительского элемента так, чтобы переполнение было совсем не "видимым". таким образом, установка переполнения на "скрытый" заставит родителя вытягиваться за дно плавающего потомка. это верно только в том случае, если вы не установили высоту для родителя, конечно.</p><p>как я уже сказал, второй метод предпочтительнее, так как он не требует, чтобы вы добавляли семантически бессмысленные элементы в разметку, но бывают случаи, когда вам нужно, чтобы <code>overflow</code> было видимым, и в этом случае добавление очищающего элемента более чем приемлемый.</p>

<p>это из-за плавания div. добавьте <code>overflow: hidden</code> на внешний элемент.</p><pre><code><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> </code></pre><p> <a href="http://jsfiddle.net/lqdjw/">демо</a> </p>

<p>вы путаете, как браузеры отображают элементы, когда есть плавающие элементы. если один элемент блока является плавающим (ваш внутренний блок в вашем случае), другие элементы блока будут игнорировать его, потому что браузер удаляет плавающие элементы из обычного потока веб-страницы. затем, поскольку плавающий элемент div был удален из обычного потока, внешний элемент div заполняется, как будто внутреннего элемента div нет. однако встроенные элементы (изображения, ссылки, текст, черные кавычки) будут соблюдать границы плавающего элемента. если вы введете текст во внешний div, текст будет размещен вокруг внутреннего div.</p><p>другими словами, блочные элементы (заголовки, абзацы, div и т.д.) игнорируют плавающие элементы и заполняют, а встроенные элементы (изображения, ссылки, текст и т.д.) учитывают границы плавающих элементов.</p><p> <a href="http://jsfiddle.net/aleruar/gk4zd/">пример скрипки здесь</a> </p><pre><code><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> </code></pre>

<p>если вам нужно, чтобы ваши дочерние элементы перемещались влево, я рекомендую приведенный ниже код вашему родительскому элементу.</p><pre><code>.parent\_div{ display: flex; } </code></pre>

<p>вы можете использовать свойство overflow для контейнера div, если у вас нет div для показа поверх контейнера, например:</p><pre><code><div class="cointainer"> <div class="one">content one</div> <div class="two">content two</div> </div> </code></pre><p>вот следующий css:</p><pre><code>.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; } </code></pre><p>-----------------------или же-------------------------- ----</p><pre><code> <div class="cointainer"> <div class="one">content one</div> <div class="two">content two</div> <div class="clearfix"></div> </div> </code></pre><p>вот следующий css:</p><pre><code> .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; } </code></pre>