Box Model & Layout

CSS Float

Push elements to the left or right (legacy layout).

1Floating

Originally for wrapping text around images. Use Flexbox/Grid for modern layout.

Example Code

css

img {
  float: right;
  margin: 10px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

2Understand it in a real interface

Floats are useful for allowing text to wrap around an image in an article. They are a less direct choice for a modern application layout that needs aligned rows and columns. If a floated child appears outside its parent’s height, inspect how the parent establishes its formatting context.

3Try it yourself

Float a small image beside a paragraph and compare the text wrapping. Add a second paragraph and a surrounding border to inspect the parent’s height. Then use a flex layout for a card row and compare why that model fits the different task.

Finished reading?

Mark this topic as complete to track progress.

CSS Overflow

Next Topic

CSS Inline-block