Floaty McFloatface: How floats work

CSS properties related to floating:

.floated-el {
	/* Floating an element allows sibling text elements to wrap around it (to the side) */
	float: left;
	float: right;
}

.sibling-of-float-that-clears-float {
	/* "Clearing" an element will end the "text wrap" of the float above it and place the element below the float (instead of beside it) */
	clear: left;
	clear: right;
	clear: both;
}

/* Add this to the parent to contain its floats that may extend outside */
.parent {
	overflow: auto;
}

The example has this DOM structure:

<div class="parent">
	
	<span class="a">40px</span>
	<div class="b">floated div</div>
	<span class="c">40px</span>
	
	<div class="d">display:block, not cleared</div>

</div>

.a, .c {
    /* "display inline" is the default for <span> - inline and inline-block elements wrap around the float */
	display: inline;
}
.b {
	float: left;
}
.d {
    /* "display: block" is the default for <div>. Will not wrap around float or clear it at the bottom. */
	display: block;
}

• The 4 elements .a to .d are siblings.
  • The "40px" boxes (.a, .c) simulate text content that is wrapping.
  • The floated div (.b) is 80px wide and represents an image inline with text content.
  • div.d represents a block element, for example more content in an article.
  • .parent is 360px wide.

Notice these things about the interactive example:

• The floated div is in the middle of the text content in the DOM (the arrows show where the floated element is in the DOM).
• It takes the same x-axis line as the text content that comes before it.
  • But only if there is enough space on that line.
  • If (floated el width + sum(preceding text elements width)) > parent width
    • Then the floated element will go onto the next line (and text content after it will fill the remaining space on the preceding line).
      • You can see this when there is a line of 8 green, then a single blue, then on the line below the floated element.
• The text content of uncleared display:block sibling elements that follow a float still wrap around it, even though the div box outline goes through the float.
• The parent does not contain the float by default.
  • Two ways to fix this:
    • 1. Apply a clear:both to a sibling element that follows the float.
    • 2. Apply overflow:auto to the parent.
• The same rules apply to right hand side floats.