Bei als floated definierten Elementen kann es zu unschönen Umflüssen bei angelehnten Objekten kommen.

Floated element
Non floated element will wrap arround the floated element if there is more text than float height.
.example-bad__left {
  float: left
}

.example-bad__right {
  padding-left: 5px
}

Wird dem angelehnten Objekt die Eigenschaft overflow: hidden angehängt lässt sich dieser Effekt aufheben.

Floated element
Non floated element will wrap arround the floated element if there is more text than float height.
.example-good__left {
  float: left;
}

.example-good__right {
  padding-left: 5px;
  overflow: hidden; // Prevent float wrapping of content
}

 

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.