Почему float ведет себя иначе, чем другие опции, когда мы передаем float родительскому элементу для очистки float?

Question

В этом примере http://jsbin.com/inoka4 ширина не определена для родительского элемента

если я хочу обернуть красные рамки в границу контейнера.

тогда мы можем сделать это 5 способами

• чтобы float также <div class="container">
• overflow:hidden или overflow:auto
• любой хак с исправлением к <div class="container clearfix">
• Высота подачи до <div class="container">
• добавление еще одного html-элемента (например, еще одного div или <br >) после 2 поля в <div class="container"> введите код здесь and give очистить: слева or: оба or: вправо` элемент

мой вопрос любой другой вариант, кроме float, не вносите никаких изменений в <div class="container"> и ширину внутренних блоков. но если мы используем float:left или right для родительского блока, то он сокращает также весь блок и внутренние блоки.

Почему?

пример ссылки: http://jsbin.com/inoka4

Редактировать: Мой вопрос не о том, какой метод мне следует использовать, вопрос в том, почему Float уменьшает ширину

Answer 1

Я думаю, что лучше использовать переполнение: скрытый. Это простое изменение в одну строку, и оно работает.

div#container {
    ...
    overflow: hidden;
}

Добавление дополнительных div s для четкого исправления требует изменений в html для чего-то действительно css. В качестве альтернативы, при использовании clear fix, делая такие хаки, как ...

div:after {
    content:....
    ...
}

твой css становится больше и грязнее. Но это все еще хороший вариант (особенно если вам нужно, чтобы вещи переполняли коробку)

Ссылка: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/

Answer 2

Лучше всего всегда очищать ваши поплавки. Сразу после того, как вы закроете div с помощью класса .right, и как раз перед тем, как закроете div с помощью класса .container, добавьте новый div, например:

<div class="clear"></div>

.clear - это просто {clear:both;} в вашей таблице стилей. Это то, что я использую весь день, и работает как удовольствие.

Окончательная разметка будет:

<div class="container">
    <div class="left"> ... </div>
    <div class="right"> ... </div>
    <div class="clear"></div>
</div>

Редактировать: Точно так же, как ваш последний пример, по-видимому. :)

Answer 3

Если вы не используете float для контейнера, его ширина устанавливается на 100%.Если вы добавите плавающий элемент, он займет только необходимое ему пространство.В этом случае ширина рассчитывается двумя внутренними делителями.

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

Поэтому я советую использовать float для контейнера и добавить clear: оба элемента после контейнера.