Очистка поплавков без дополнительной разметки

Question

Я читал эту страницу здесь: http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/ об очистке поплавков без дополнительной разметки, но там не упоминалось то, что, как я думал, вы могли бы сделать.также очистить поплавок, просто не плавая последний элемент?

Так что, если вы хотите выпустить 3 элемента, вы плаваете первые два и не плаваете последний элемент .... последний все еще будет плаватьно что-нибудь после не будет?

Answer 1

Большинство CSS-таблиц "сброса" имеют класс для автоматической очистки после элемента.Например, эти правила из html5reset.org позволяют писать <div class="clearfix">your floats in here</div>:

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Answer 2

Если элементы в контейнере установлены как плавающие, они облажаются.

Поскольку родительский элемент не знает высоту плавающего элемента в нем (потому что он не находится в потоке документабольше)

http://jsfiddle.net/CkdY6/

Лучшее, что вы можете сделать, это установить для родительского элемента значение overflow: hidden

http://jsfiddle.net/CkdY6/1/

Но как кто-то недавноуказал мне, что он облажается, когда вы хотите использовать CSS3 вещи, такие как тень.

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/