Elastyczne struktury siatki - float: vs display: table-cell

Question

Użyłem Bootstrap i przeszukałem Foundation. Z tego, co widziałem, obie używają float:, aby uzyskać elastyczne siatki.

Widziałem również sieci reagujące przy użyciu tylko zapytań display: table-cell i @media.

Ten ostatni wydaje mi się lepszy, ponieważ float: ma na celu osiągnięcie określonego efektu typograficznego, więc użycie go w celu uzyskania responsywnego układu siatki wygląda jak włamanie.

Moje pytanie: czy jest float: używane przez bootstrap, fundament i inne elastyczne sieci, aby ominąć brak właściwej obsługi table-cell w starszych przeglądarkach? Jeśli jest jeszcze inny powód, chciałbym to usłyszeć.

Answer 1

Istnieje około 3 sposoby, aby systemy Grid: floatinline-blocktable-cell

Wszystkie one mają wady i zalety. Bootstrap prawdopodobnie używa float, ponieważ będąc szkieletem, łatwo adaptuje się do różnych scenariuszy.

Dużym ograniczeniem metody float jest to, że nie można wyrównać pionowo elementów siatki i osobiście wolę używać metody inline-block.

Jednak metoda inline-block przynosi problem spacje (ponieważ elementy siatki stają się rodzajem słów), które mogą być mocowane na różne sposoby, jak obszernie wyjaśnił Chris Coyier:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Największym problemem z metodą table-cell jest, moim zdaniem, że można umieszczać tylko elementy siatki w w jednym wierszu, ponieważ nie można ich wypchnąć na nowej linii za pomocą CSS. Oznacza to, że dla każdego wiersza potrzebny jest nowy element kontenera, który staje się bardzo nieelastyczny w przypadku projektów responsywnych.

Answer 2

Zgadzam się ze wszystkim, co napisał gyo i dodałbym tylko, że znalazłem Pure grids (dawniej sieć YUI3) jako efektywną i przyjazną dla przeglądarki aplikację metody inline-block. Co ciekawe, zawiera również niektóre z wyżej wymienionych właściwości Flexible Box. Jednak dużą wygraną, jeśli internacjonalizacja jest wymogiem, jest to, że blok inline automatycznie odwraca się, gdy ustawia się dir = "rtl", w przeciwieństwie do układów opartych na float (nie ma pewności co do tabeli).