FAQ: CSS Display and Positioning - Float

On the .question's, include a clear: both; (or left) property and that should fix it. Above, the float is still in effect.

We should consider how the term float came into being. It is an old typography term that refers not to the element itself, but the surrounding content. float: left; says the content will float around the object to the left of it. This permits that object to remain in normal flow. Repeated float: left; will appear inline.

Compare this to an absolutely positioned object on the left. Content will not float around it, but will have the same relative top, left reference, so will be partially obscured by that object.

7 Likes