Очистка поплавка на элементе заставляет его прыгать ниже неплавающего элемента

Question

Это сложно объяснить, поэтому позвольте мне дать вам ссылку: http://jsbin.com/izinoy/6/edit#html,live. Вы можете легко увидеть нежелательное поведение: поле «шесть» прыгает ниже левой навигации, потому что я применил очистку: влево.

Но я не хочу, чтобы это произошло, очевидно. Я не знаю, почему это происходит, потому что навигация не плавает, так почему она прыгает ниже навигации и как я могу это исправить?

---

EDIT: Есть проблема с моим вопросом . Я не знаю, как это произошло: - /, но в вопросе я сказал, что навигация не плавает, хотя это так! Вот почему плавание не имело смысла для меня. Я упустил из виду эту «крошечную» деталь. Да, теперь очевидно, почему поле «шесть» прыгает ниже навигации.

Answer 1

Селектор .box определяет float: left.Это свойство заставляет элемент плавать.

О clear:left, позвольте мне процитировать https://developer.mozilla.org/en/CSS/clear:

Свойство clear указывает, может ли элемент быть рядом с плавающими элементами, которые ему предшествуютили должен быть перемещен вниз (очищен) под ними.

влево : элемент перемещается вниз, чтобы очистить плавающие объекты слева.

Удалите float: left, если вы хотите выровнять все поля по вертикали.Удалите clear:left, если вы не хотите, чтобы элементы div сместились вниз.