One of the basic and the most important properties every web designer should learn is the float property. It is most commonly used for floating text around the image or creating the two column layout. The float property can cause a lot of frustration and confusion if it's not fully understood, so we're here to make those confusions disappear with this short explanation.

Also, be sure to check out our articles on some other properties, other than CSS float, that often cause confusion like CSS columns or relative font size.

Behind the word float, an endless sea of possibilities (and misbehaviors). float is probably the most difficult CSS concept to grasp. Its behavior can be intriguing, unexpected, and magical. Probably because, of all positioning properties there are, it is the one that most influences its surroundings. In other words, applying a float not only modifies the element it’s applied upon but also alters its ancestors, siblings, descendants, and following elements. The floating image will overflow because it’s higher than its yellow container. And as you can actually see, it even visually breaks this paragraph you’re reading.

I’ve intentionally left this layout error to showcase why floats are unpredictable: they can even break their parent’s siblings! Because float: left takes the image out of the flow, the yellow paragraph’s height is only the height of its text. In other words, the height of the image isn’t taken into account.

I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus nulla quibusdam optio saepe, praesentium eos pariatur dignissimos earum numquam sint, asperiores consectetur repellendus ipsam minus! Nam cum totam eaque quas? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus laudantium ea minima, nesciunt reprehenderit quasi excepturi! Eligendi, odit iste quaerat voluptatum aliquid numquam quisquam pariatur sunt saepe, nisi, consectetur animi.