CSS layout - clearovaci prvok

Asi bych se vykašlal na "hr" a dal tam "div" a do něj to co má být pod plovoucím boxem.
Pokud chceš HR kvůli tomu, aby oddělil logické bloky lidem bez stylu (třeba těm co si stránku uloží jako html), tak <div><hr /></div>,
přičemž by ten div měl clear: both; a hr by byl zmizelý, display: none;.

Probůh proč taková šaškárna?

Odjakživa se přece používá:

<br clear="all">

nebo novější varianta

<br style="clear:both">

Za to už si pak můžeš dát co chceš

http://www.pixy.cz/blog/2003_12_archiv.html#1071056082

Odjakživa se přece používá...
Odjakživa se clearuje proto, že je potřeba nějakému obsahu zaručit, aby byl až pod plovoucím boxem. Myslím, že většinou je lepší takový obsah celý označit. A celému označenému obsahu poté říci, že má clearovat.
Prvek "hr" je vhodný právě pro to, co jsem napsal. Aby uživatel bez stylu měl dva logické bloky od sebe nějak viditelně odděleny (například není špatné umístit HR mezi obsah a menu).

Vít Dlouhý:
pixy clearuje s hr, ktoremu nastavi margin-top: -1em, co nie je najtastnejsie riesenie

DoubleThink:
elementu br nenastavis NULOVU vysku, IE vzdy generuje blok s vyskou 2px

llook:
obalit hr je jednoduchy a skvely napad. minimalne lepsie riesenie ako pouzit prazdny div. idealna situacia je samozrejme, ked clearovat moze nasledujuci element na stranke. napriklad dvojstlpcovy layout: lavy stlpec s navigaciou (float: left), pravy stlpec s hlavnym obsahom (float: right) a za nimi ide footer (clear: both). nie vzdy je to vsak mozne. vtedy sa mi zda najlepsie riesnie to tvoje, pokial nechcem pouzit prazdny prvok a vadia mi tie 2px v IE. takze:

<div class="endfloat"><hr /></div>

CSS:
.enfloat {
clear: both;
height: 0; font-size: 0;
margin: 0; padding: 0; /* pre istotu */
_overflow: hidden; /* toto prinuti IE zobrazit NULOVU vysku */
}
.endfloat * { display: none; }


testovane na IE 5+, firefox 0.9.3, opera 7.50 - vsetko win platforma

dakujem za rady.

DoubleThinku, to, že se něco používá odjakživa, není přece důvod. Atribut clear u tagu <br> se považuje za zastaralý.

<br clear="all">
nebo novější varianta
<br style="clear:both">

S tím stylem je to lepší, ale pak zase na to není důvod používat tag br :-)

hm, takze predcasna radost. totiz, pokial ma clearer nulovu vysku, v mozille neplni svoju funkciu, ako keby tam vobec nebol. to neexistuje riesenie, aby bol neviditelny a zaroven nezaberal ziadne miesto? any ideas?

Pokud po plovoucím prvku není žádný viditelný obsah, pak IMHO není potřeba nic clearovat. Pokud tam obsah ten obsah je, proč ho nedat do toho clearovacího divu?

div.endfloat { clear: both; }
div.endfloat hr { display: none; }

<div class="endfloat">
<hr />
Obsah který má být clearován.
</div>

Nulovou výšku to sice nemá, ale má to nulový margin a padding, takže vlastně není nic mezi plovoucím prvkem a clearovaným obsahem.

no a jestli nemá zabírat místo, tak co tam třeba dát nějaký div s rozměry 1x1 a nechat ho odplavat doprava? To přece fyzicky (téměř) žádné místo nezabere.

snad som uz nasiel definitivne riesenie :) (dole)

llook:
nechcem ta zatazovat studovanim celeho kodu stranky alebo posielat link a robit si reklamu, mozu nastat vynimky, ked sa riesenie, ktore si naznacil, nehodi (napr. nasledujuci prvok je pozicovany relativne). inak sme sa Yuhům zhodli, ze tvoj priklad aj z hladiska semtantiky idealne riesenie.

Yuhů:
moze mat clearer nastaveny float?

co tak pre mozillu pouzit zaporny margin. opakujem, v 90% pripadoch sa da pouzit jednoduchsie riesenie o ktorych tu uz bola rec a netreba to takto komplikovat:

<div class="endfloat"><hr /></div>

.endfloat {
clear: both;
font-size: 0;
height: 1px; margin-top: -1px; /* normalne prehliadace :) */
_height: 0;_overflow: hidden; _margin: 0; /*IE */
visibility: hidden;
}
.endfloat hr { display: none; }

snad uz v tomto kode nenarazim na ziadny nedostatok :)