Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

float a display: block

  • 12.03.2012 18:19:57
  • CSS
  • 5

Ile razy zdarzyło się Wam używać float: right/left do osiągnięcia konkretnego efektu? A ile razy zdarzało Ci się dodać do tego atrybutu display: block;? Prawda jest taka, że nie ma potrzeby dublować jednej właściwości :). Jakiej i dlaczego? W daleszej części wpisu. Jest to wpis z cyklu "czy wiesz że...?".

Na początku muszę przyznać, że też kiedyś stosowałem tą podwójną regułę. Chodzi o coś takiego:

element {
   display: block;
   float: left / right;
}

Większość z Was pewnie zestawia razem te regułki (możcie podejrzeć sobie kod źródłowy np. wp.pl czy innego większego portalu). A niepotrzebnie. Jeżeli wczytamy się dokładnie w specyfikację atrybutu CSS float, dowiemy się, że każdy element posiadający ten atrybut staje się elementem blokowym:

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.

Dlatego od teraz nie trzeba upewniać się, że element którego chcemy zrobić "pływającym", na pewno jest elementem blokowym.

Teraz przykładowy kod powinien wyglądać tak:

element {
   float: left / right;
}

Mam nadzieję, że informacja okaże się dla Was przydatna :).

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar procek

13.03.2012 procek

Dobra wskazówka, ale zawsze jak mamy element liniowy, który będziemy odsuwać floatem to myślimy o tym by był blokowy i miał nadane rozmiary, więc później to display:block niestety zostaje. Z drugiej jednak strony czasem chcielibyśmy jednak zrezygnować z floata i co wtedy...

Gavatar haRacz

13.03.2012 haRacz

@procek - wtedy masz display: inline-block; nie rozwiazuje to wszystkich mozliwych scenariuszy, ale powinno sie go uzywac jako zamiennika dla float gdziekolwiek to mozliwe.

Gavatar Dawid Krsiak

13.03.2012 Dawid Krsiak

"A ile razy zdarzało Ci się dodać do tego atrybutu display: none;?"
Chyba miało być
"A ile razy zdarzało Ci się dodać do tego atrybutu display: block;?"

Gavatar Milena

30.03.2012 Milena

Takie pytanie otrzymują ode mnie kandydacji na teście rekrutacyjnym na front-endowców już od bodajże dwóch lat :)

Są jeszcze dwa takie style, które wymuszą display: block - position: absolute; i position: fixed; gwoli ścisłości

Gavatar shpyo

30.03.2012 shpyo

@Milena: dzięki za info :)

Dodaj komentarz