Vorteile der Verwendung von display: inline-block vs float: links in CSS

Normalerweise würden wir, wenn wir mehrere DIVsin einer Reihe haben wollen, verwenden float: left, aber jetzt habe ich den Trick von entdecktdisplay:inline-block

Beispiellink hier . Es scheint mir, dass dies display:inline-blockein besserer Weg ist align DIVs, aber gibt es irgendwelche Nachteile? Warum ist dieser Ansatz weniger beliebt als der floatTrick?

In 3 Worten: inline-blockist besser.

Inline-Block

Der einzige Nachteil des display: inline-blockAnsatzes besteht darin, dass in IE7 und darunter ein Element nur angezeigt werden kann, inline-blockwenn es bereits inlinestandardmäßig war. Dies bedeutet, dass Sie anstelle eines <div>Elements ein <span>Element verwenden müssen. Es ist überhaupt kein großer Nachteil, da a semantisch <div>zum Teilen der Seite dient, während a <span>nur zum Abdecken eines Seitenbereichs dient, sodass es keinen großen semantischen Unterschied gibt. Ein großer Vorteil davon display:inline-blockist, dass, wenn andere Entwickler Ihren Code zu einem späteren Zeitpunkt warten, es viel offensichtlicher ist, was display:inline-blockund was text-align:right zu erreichen versucht, als eine float:leftoder- float:rightAnweisung. Mein Lieblingsvorteil des inline-blockAnsatzes ist, dass er einfach zu bedienen vertical-align: middleist line-heightundtext-align: centerdie Elemente auf eine intuitive Weise perfekt zu zentrieren. Ich habe im Mozilla-Blog einen großartigen Blog-Beitrag über die Implementierung eines browserübergreifenden Inline-Blocks gefunden . Hier ist die Browserkompatibilität .

Schweben

Der Grund dafür, dass die Verwendung der floatMethode nicht für das Layout Ihrer Seite geeignet ist, liegt darin, dass die floatCSS-Eigenschaft ursprünglich nur dazu gedacht war, einen Text um ein Bild zu wickeln (Magazinstil), und sich aufgrund ihres Designs nicht am besten für allgemeine Seitenlayoutzwecke eignet. Wenn Sie schwebende Elemente später ändern, treten manchmal Positionierungsprobleme auf, da sie nicht im Seitenfluss enthalten sind . Ein weiterer Nachteil ist, dass im Allgemeinen ein Clearfix erforderlich ist, da sonst Aspekte der Seite beschädigt werden können. Der Clearfix erfordert das Hinzufügen eines Elements nach den schwebenden Elementen, um zu verhindern, dass die übergeordneten Elemente um sie herum zusammenfallen. Dies überschreitet die semantische Grenze zwischen der Trennung von Stil und Inhalt und ist daher ein Anti-Muster in der Webentwicklung .

Alle im obigen Link erwähnten Leerraumprobleme können leicht mit der white-spaceCSS-Eigenschaft behoben werden .

Bearbeiten:

SitePoint ist eine sehr glaubwürdige Quelle für Webdesign-Ratschläge und sie scheinen die gleiche Meinung zu haben wie ich:

Wenn Sie mit CSS-Layouts noch nicht vertraut sind, wird Ihnen verziehen, dass die Verwendung von CSS-Floats auf einfallsreiche Weise die Höhe der Fähigkeiten ist. Wenn Sie so viele CSS-Layout-Tutorials wie möglich verwendet haben, können Sie davon ausgehen, dass das Beherrschen von Floats ein Übergangsritus ist. Sie werden von dem Einfallsreichtum geblendet sein, der von der Komplexität überrascht ist, und Sie werden ein Erfolgserlebnis gewinnen, wenn Sie endlich verstehen, wie Floats funktionieren.

Lass dich nicht täuschen. Du wirst einer Gehirnwäsche unterzogen.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Update 2015 - Flexbox ist eine gute Alternative für moderne Browser :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Mehr Info

21. Dezember 2016 Update

Bootstrap 4 entfernt die Unterstützung für IE9 und entfernt somit Floats aus Zeilen und die volle Flexbox.

Pull-Anfrage Nr. 21389

Ich stimme zu, dass dies im Allgemeinen inline-blockbesser ist, aber es gibt eine zusätzliche Sache, die berücksichtigt werden muss, wenn Sie prozentuale Breiten verwenden , um ein ansprechendes Raster zu erstellen (oder wenn Sie pixelgenaue Breiten wünschen):

Wenn Sie inline-blockRaster mit einer Gesamtbreite von 100% oder nahezu 100% verwenden, müssen Sie sicherstellen, dass Ihr HTML-Markup keinen Leerraum zwischen den Spalten enthält .

Bei Floats müssen Sie sich keine Sorgen machen - die Spalten schweben über Leerzeichen oder anderen Inhalten zwischen Spalten. Die Antworten dieser Frage enthalten einige gute Tipps zum Entfernen von HTML-Leerzeichen, ohne Ihren Code hässlich zu machen .

Wenn Sie das HTML-Markup aus irgendeinem Grund nicht steuern können (z. B. ein restriktives CMS), können Sie die hier beschriebenen Tricks ausprobieren, oder Sie müssen möglicherweise Kompromisse eingehen und Floats anstelle von Inline-Block verwenden. Es gibt auch hässliche CSS-Tricks, die nur unter extremen Umständen verwendet werden sollten, z. B. font-size:0;auf dem Spaltencontainer, und dann die Schriftgröße in jeder Spalte erneut anwenden .

Beispielsweise:

• Hier ist ein 3-Spalten-Raster mit einer Breite von 33,3% mitfloat: left . Es "funktioniert einfach" (aber für den Wrapper muss gelöscht werden).
• Hier ist genau das gleiche Raster mitinline-block . Das Leerzeichen zwischen den Blöcken erzeugt einen Raum mit fester Breite, der die Gesamtbreite über 100% hinausschiebt, das Layout unterbricht und bewirkt, dass die letzte Spalte eine Zeile nach unten fällt.
• Hier ist das gleiche Raster mit inline-blockund ohne Leerzeichen zwischen den Spalten im HTML . Es "funktioniert einfach wieder" - aber der HTML-Code ist hässlicher und Ihr CMS erzwingt möglicherweise eine Art Verschönerung oder Einrückung in die HTML-Ausgabe, was dies in der Realität schwierig macht.

Wenn Sie die Pixelgenauigkeit ausrichten möchten div, verwenden Sie float. inline-blockscheint immer zu erfordern, dass Sie ein paar Pixel abhacken (zumindest im IE)

Eine ausführliche Antwort finden Sie hier .

Aber im Allgemeinen müssen floatSie sich der umgebenden Elemente bewusst sein und sich um sie kümmern und auf inline-blockeinfache Weise Elemente auskleiden.

Vielen Dank

Es gibt ein Merkmal des Inline-Blocks, das jedoch möglicherweise nicht einfach ist. Das heißt, der Standardwert für die vertikale Ausrichtung in CSS ist die Basislinie. Dies kann zu unerwartetem Ausrichtungsverhalten führen. Schauen Sie sich diesen Artikel an.

http://www.brunildo.org/test/inline-block.html

Wenn Sie stattdessen einen float: left ausführen, sind die divs unabhängig voneinander und Sie können sie mithilfe des Randes einfach ausrichten.