was ist das problem mit css br klar?

Question

ich über diesen Artikel gestolpert http://www.thefloatingfrog.co.uk/css/my-hatred-of-br-clearall/

Wann würde man brauchen, das zu benutzen? Warum ist es böse? Ich verstehe nicht die Ersatz-Syntax können Sie erklären?

Answer 1

Einstellung für beide, damit andere Elemente nicht auf der linken oder rechten Seite des Elements schweben können. Die Klasse unten ist eine einfache Möglichkeit, dies überall hinzuzufügen.

.clear { 
    clear:both; 
} 

Also, wenn Sie etwas löschen wollen (das heißt, wenn Sie das nächste Element auf der linken Seite schweben, wäre es unter dem aktuellen Element und nach links, statt links davon) Sie‘ Fügen Sie einfach die Klasse .clear hinzu.

Das Problem mit dem folgenden Code ist, dass wenn Sie später entscheiden, dass Sie nicht alles nach der "etwas" -Klasse löschen möchten, dann müssen Sie durch Ihre HTML gehen und entfernen Sie die Br clear = "alle" wo auch immer du diese "etwas" -Klasse hast.

<div class="something">Cool content.</div> 
<br clear="all"> 
<div class="other">Cool content again.</div> 

Stattdessen könnten Sie so etwas tun:

.something { 
    float: left; 
} 
.other { 
    clear :both; 
    float: left; 
} 

<div class="something">Hi!</div> 
<div class="other">Hi again from below!</div> 

auf diese Weise, wenn Sie später alle Blöcke mit der ‚anderen‘ Klasse schweben entscheiden, dann können Sie nur die ‚klar entfernen: both; " aus dem CSS einmal.

Answer 2

Die Idee ist, dass Ihr Markup die Informationen beschreibt und das CSS diese Informationen formatiert. Ein Dummy
-Tag zum Löschen von Floats ist nicht semantisch, da es nur aus Layoutgründen verwendet wird. Es gibt andere semantische Wege, Floats zu löschen, die diese Trennung aufrechterhalten. Wie unten, aber hier zur Verdeutlichung kommentiert, ist dies eine gute Ressource für das semantische Löschen von Floats http://css-tricks.com/the-how-and-why-of-clearing-floats/

Answer 3

Wenn Sie floated Elemente haben, kann das Elternelement seine Dimensionen nicht effektiv berechnen und Größen falsch berechnen. Andere Gegenstände, die schwebenden Gegenständen folgen, können auch außerhalb der Position sitzen. Indem Sie ein Element am Ende Ihrer Gleitkommazahlen löschen, ändern Sie dieses Verhalten.

EDIT

Eigentlich richtig ist wohl das falsche Wort zu verwenden, wie das ist, was sollte das Wort passieren und mit richtig schlägt es gebrochen ist.

Answer 4

Der Autor ist gerade auf einer verrückten Schimpfrede darüber, wie das Gleiche mit CSS auf den DIV-Elementen selbst erreicht werden kann. Er sagt, dass br class = "clear" unnötig ist.

Es ist auch nicht eine gute Praxis, weil es Inhalt mit Darstellung mischt. Wenn ein Webdesigner die Webanwendung neu gestalten wollte, müsste er oder sie den HTML-Code ändern, um alle br clear-Elemente herauszuziehen. Wenn dies jedoch wie vom Autor vorgeschlagen gemacht wurde, könnten die CSS-Dateien ausgelagert werden unabhängig vom HTML, was ihre Arbeit einfacher macht und ihnen eine Sache weniger gibt, über die man schwärmen und schwärmen kann.

Die Schimpfkanonade ist natürlich gerechtfertigt, da diese einfachen, dummen Codezeilen tatsächlich eine Menge Kopfschmerzen verursachen können.

Answer 5

Ich war im Begriff, etwas snarky über Sie nicht den Artikel zu lesen, aber als ich sah, dass es nur eine Seite von ätzendem Zorn ohne Erklärung war, dachte ich, dass ich antworten würde.

Es ist, weil es bessere Möglichkeiten gibt, das zu tun, was Sie tun möchten - nämlich, indem er CSS in der Art verwendet, wie er in dem Artikel tut. Er hat die Semantik der Elemente, die er anzeigt, von seiner Darstellung getrennt. Warum ist das eine große Sache? Nun, zum einen kann er leichter transformieren, wie seine Seite aussieht, wenn sie auf verschiedenen Plattformen (Handy, Desktop) und Medien (Bildschirm, Druck, ein Screenreader für Blinde) gezeigt wird, einfach durch Bearbeiten von CSS und ohne den Finger berühren zu müssen dokumentieren sich selbst. Diese Eigenschaft von CSS ist reines Gold.

Auf der anderen Seite, wenn Sie ein Konstrukt wie dieses verwenden, setzen Sie eine harte Einschränkung über die Präsentation Ihres Dokuments, die umher bleibt, egal mit welchem ​​Medium oder Plattform Sie es zu tun haben. Was macht ihn so wütend? Weil, sobald ein Entwickler vor ihm gekommen ist und <br clear="all"> benutzt hat, er es herausnehmen muss, um die Vorteile zu erhalten, die ich gerade erwähnt habe. Deshalb ist es so frustrierend. Ein schlechter Entwickler kann eine ganze Reihe von Entwicklungsszenarien für jeden anderen Entwickler deaktivieren, der danach kommt.

Soweit CSS geht, muss ich sagen, dass es ein sehr schwieriges Thema ist, einfach abzuholen, ohne alles darüber zu lesen, wie es funktioniert. Es ist schwer zu erklären, wie das clear Attribut funktioniert, wenn Sie floats nicht verstehen.Ich hatte es selbst ziemlich schwer, bis ich mir eine great book on the subject gekauft habe.