Floating and Shapes

Chapter 10

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