Понимание того, как CSS ясен: оба должны работать

Question

У меня есть анкета на основе HTML-формы, которую я пытаюсь собрать. Я выстроил все элементы HTML-формы с помощью CCS, когда столкнулся с проблемой плавающих элементов.

У меня есть DIV, содержащий некоторые элементы формы, которые я хотел разместить под предыдущим DIV. Так как предыдущий DIV был «перемещен» влево, я решил, что должен использовать синтаксис CSS clear: оба . Тем не менее, когда я это сделал, мой контент прошел полностью слева от страницы, выскакивая из нее, содержащей DIV. Я не уверен почему.

Я создал пример JSFiddle, чтобы помочь объяснить ...

http://jsfiddle.net/BrWUE/

Кто-нибудь может увидеть, что я делаю неправильно, и почему ясно: оба выталкивают мой DIV из всех его контейнеров? Спасибо.

Answer 1

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

Вы должны использовать один из многочисленных методов cleafix.
Вот один из html5boilerplate :

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1 }

А вот как это выглядит в вашем коде: http://jsfiddle.net/BrWUE/1/.