Różnica pomiędzy inline-block a float

Question

Tak jak w tytule. Czym to się różni?

Answer 1

Wszystkim ;)

float sprawia, że element "pływa", tzn. jest przenoszony na lewo/prawo od tekstu/bloku. Dodatkowo jest wyciągany z normalnego obiegu dokumentu, co sprawia, że nie zawsze rozciąga rodzica. Wszystkie elementy pływające są blokowe.

display: inline-block sprawia, że dany element jest równocześnie blokowy (można mu nadać wymiary), ale zachowuje się jak tekst (ustawia się z innymi elementami w jednej linii, działa na niego text-align i vertical-align: top rodzica oraz nie dochodzi do przełamania linii przed i po nim).

Comments

Mam pytanie, czy (wg prawideł semantyki) float nie jest aby przeznaczony tylko do rozmieszczania tekstu, który ma dany element opływać z wybranej strony?

---

Nie da się przykładać kategorii semantyki do języka, który nie służy przekazywaniu treści! Jeśli chodzi o CSS, to w nim semantyka nie obowiązuje, bo to język prezentacji.

Natomiast jeśli zaczniemy się zastanawiać po co stworzono float, to raczej doszlibyśmy do wniosku, że nie dla tekstu opływające element, lecz właśnie dla elementu, który ma być opływany przez tekst. Zresztą tak też mówi sama sama specyfikacja CSS 2.1 (pogrubienie moje):

This property specifies whether a box should float to the left, right, or not at all.

 

---

W takim razie, czy należy zwracać uwagę na to, czy dany element ma w swoim "otoczeniu" tekst, czy to nie ma znaczenia? Chodzi mi o to, czy użycie float jest uzależnione od obecności tekstu w pobliżu elementu, czy nie?

W specyfikacji W3C nie zauważyłem, aby o tym wspominali. Czyli float można stosować wszędzie, jeśli przyniesie oczekiwany efekt, bez względu na to czym jest dany element lub co zawiera?

---

Czyli float można stosować wszędzie, jeśli przyniesie oczekiwany efekt, bez względu na to czym jest dany element lub co zawiera?

Tak. Chociaż obecnie coraz rzadziej się z niego korzysta, bo istnieją lepsze sposoby, np. flexbox.