Float & Clear

Float

• can move elements as far left or as far right as possible on a web page.

• Values: left/right/none

• Floated elements must have a width specified, Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.

• Floated Elements are not in the Document-Flow

• float only works on elements on the same level (silbings/brothers)

• float implies the use of the block layout, it modifies the computed value of the display values to block (in most cases)

• Float - MDN (opens new window)

• Float and Clear - w3schools (opens new window)

• Float Examples - w3schools (opens new window)

• Die CSS-Eigenschaft float verstehen und anwenden (opens new window)

• Self-HTML Float (opens new window)

---

Clear

The Clear property specifies how elements should behave when they bump into each other on the page. You can clear an element’s left or right side (or both) It can take on one of the following values:

• left — the left side of the element will not touch any other element within the same containing element

• right — the right side of the element will not touch any other element within the same containing element

• both — neither side of the element will touch any other element within the same containing element.

• none — the element can touch either side

• Clear - w3schools (opens new window)

• Clear - MDN (opens new window)

---

Clearfix-hack

If an element is taller than the element containing it, and it is floated, it will "overflow" outside of its container. This 'hack' can fix it:

.clearfix {
  overflow: auto;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}  

simple ClearFix:

.clearFix {
  clear: both;
} 
<div class="clearFix"></div>

• Clear & Clearfix - w3schools (opens new window)
• Clearfix - CSS-Tricks (opens new window)