### Figures

1. A floating image
2. A floating paragraph
3. Floating images with margins
4. Floated text without an explicit width
5. Floating to the left (or right)
6. Keeping floats from overlapping
7. More overlap prevention
8. Unlike balloons, floated elements can’t float upward
9. Keeping floats below their predecessors
10. Keeping floats level with their context
11. If there isn’t room, floats get pushed to a new “line”
12. Given the other constraints, go as high as possible
13. Get as far to the left (or right) as possible
14. Expected floating behavior
15. Backgrounds and floated elements
16. Element backgrounds “slide under” floated elements
17. Floating with negative margins
18. The details of floating up and left with negative margins
19. Floating an element that is wider than its parent
20. Layout behavior when overlapping floats
21. Displaying an element in the clear
22. Clear to the left, but not the right
23. Clear on both sides
24. Not clear at all
25. Clearing and its effect on margins
26. Using an image to define a float shape
27. An image float shape on the right
28. The basic shape boxes
29. Insets from two basic shape boxes
30. Rounding the corners of a shape box
31. A circular float shape
32. A rather small circular float shape for an even smaller image
33. The circular float shape that results from a rectangle
34. A clipped float shape
35. Various circular float shapes
36. Defining float shapes with ellipses
37. Elliptical float shapes and percentages
38. A polygonal float shape
39. How a float shape is clipped when it exceeds the shape box
40. The two polygonal fills
41. The Chrome Shapes Editor in action
42. Using image opacity to define the float shape at the 50% opacity level
43. Adding margins to float shapes
44. Making sure the shape margins don’t get clipped