Как избежать пустых чистых div?

Question

В последнее время я использую много поплавков, как это:

<div id="buttons">
  <input type="button" id="btn1" value="Button One">
  <input type="button" id="btn2" value="Button Two">
  <input type="button" id="btn3" value="Button Three">
</div>

Иногда я пускаю кнопку вправо. Иногда я плаваю все их направо. Вот где начинается проблема. Это действительно сбивает поток, если я делаю это, поэтому я должен продолжать вставлять в них:

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

в конце. Это отбрасывает макет, если я не плаваю их все.

Есть ли хорошее решение для этого?

Answer 1

Да, используйте overflow: hidden на контейнере, т.е.:

<style type="text/css">
#buttons { overflow: hidden; }
</style>

Answer 2

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

Просто укажите высоту для вашего контейнера #button до высоты ваших кнопок:

#button { height: 30px; }

Лучшим решением было бы взломать clearfix. Это довольно пуленепробиваемое, а также поможет вам без необходимости добавлять дополнительную разметку и встроенный CSS.

#buttons:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#buttons {
    display: inline-block;
}

html[xmlns] #buttons {
    display: block;
}

* html #buttons {
    height: 1%;
}

Answer 3

Когда вы перемещаете элементы с помощью CSS, они удаляются из естественного состояния потока страницы.

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

Чтобы покрыть это, вы должны указать overflow:hidden для свойства контейнера.

По умолчанию оно установлено на visible и позволит чему-либо просто «выпасть» из ящика, если оно всплыло как таковое.

Исправьте это, установив это в своем CSS:

#buttons 
{
    overflow:hidden;
}

Это теперь будет ограничивать отображение плавающих элементов в контексте и ограничениях родительского элемента DIV.

Answer 4

Обычно лучшими вариантами являются метод clearfix или метод установки 'overflow: hidden' на родительском объекте, содержащем *. 1003 *

В вашем конкретном примере у вас есть еще один вариант: вы не можете использовать любой из входов вообще и установите «text-align: right» на # кнопках

#buttons {
    text-align: right;
    }

Хотя я немного полагаюсь на 'overflow: hidden', стоит отметить, что если вы пытаетесь расположить какие-либо элементы снаружи (или частично снаружи) содержащего элемента, для которого установлено 'overflow: hidden' позиционированные элементы будут обрезаны на границе содержащего элемента. (это встречается не слишком часто, но это "недоработка", на которую стоит обратить внимание.)

Вы также можете найти пост в блоге Джеффа Старра "Извлеченные уроки касательно CSS-хака в Clearfix" интересным.

Answer 5

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

Используйте переполнение: auto для родителя, и все хорошо!

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

(Я слышал, что это работает с использованием display: наследовать, но не пробовал.)