CSS: Float Layout. (text flow around image)

Example. Text Flow Around Image

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”.

Code

<div class="div-6a">

<img class="float-24c6" src="../java-a-day/java_logo/xah_java_logo.svg" alt="xah java logo" style="width:80px" />

<div class="xc4f0a">
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”.
</div>

</div>

<hr style="visibility: hidden; clear: both">

.div-6a {
 max-width: 300px;
}

.float-24c6 {
 float: left;
 margin: 0.5rem;
}

Float property values

The float can have a value of left or right. When it's left, it aligns to the left.

When a element is floating, other elements goes around it to avoid collision or overlap.

Multiple consecutive HTML elements with float: left behave as sequence of inline-block elements such as sequence of Image Tags flowing from left to right.

Stop Flowing

If you have many floating elements, the position of the last item will be the position the next non-floating item begin. For example, you might have:

floatElement floatElement floatElement … <h2>…</h2>

The <h2> will be shown at the position right after the last flow, as if it is part of the flow.

If you don't want that, you need to stop the flow with clear:left in the element that comes after the float. Like this:

<h2 style="clear: both">A New Beginning</h2>

The clear can have values of left, right, both.

Usually, it is best to use this element to clear the floats:

<hr style="visibility: hidden; clear: both">

shape-outside is a CSS property that lets you define a custom (often non-rectangular) shape around which text (inline content) will wrap.

It works only on floated elements (usually images or other floated boxes). Without a float: left or float: right, shape-outside has no effect.

What It Solves

By default, text wraps around the rectangular margin box of a floated element.
With shape-outside, you can make the text follow curves, circles, polygons, or even the transparent parts of an image.

Basic Syntax

.floated-element {
  float: left;                    /* required */
  shape-outside: circle(50%);     /* text wraps in a circle */
  shape-margin: 20px;             /* optional space between text and shape */
}

Supported Shape Values

You can also combine with shape-image-threshold to control how transparent pixels are considered part of the shape (0.0 to 1.0).

Complete Example: Circular Text Wrap

<img src="portrait.jpg" alt="portrait" class="circle-image">

<p>Lorem ipsum dolor sit amet... (long text)</p>

.circle-image {
  float: left;
  width: 300px;
  height: 300px;
  border-radius: 50%;           /* visual circle */
  shape-outside: circle(50%);   /* text wrap circle */
  shape-margin: 25px;
  margin: 0 30px 20px 0;
}

Example: Polygon Shape

.shape {
  float: left;
  shape-outside: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
  shape-margin: 15px;
}

Is shape-outside New?

No — it's not new, but it took a long time to become widely supported:

• First proposed ~2012–2013 (CSS Shapes Module Level 1).
• Early support in Chrome/Safari around 2014–2015 (very limited at first).
• Broad modern support since January 2020 across all major browsers.

As of 2026:

• Chrome/Edge: Excellent support (since version 37).
• Firefox: Supported since version 62.
• Safari: Good support.
• Overall: Widely available (Baseline on MDN).

Some advanced features (like path() or the newer shape() function) are still rolling out or partial.

Limitations & Tips

• Must be used with float.
• Does not work with Flexbox or Grid children directly (because they’re not floated).
• Great for magazine-style layouts, pull quotes, or artistic text flow.
• Combine with clip-path for visual matching (clip the element itself to the same shape).
• For responsiveness, test on smaller screens — text may reflow awkwardly on very narrow viewports.

Quick Tip: Use your browser’s DevTools — most support a Shapes Editor (especially Firefox and Chrome) that lets you visually drag points of a polygon.

Would you like a full interactive demo with multiple shapes or examples using images with alpha channels?