CSS TutorialLesson 27Free preview
CSS Float
This lesson is part of CSS · All levels
Summary
Float causes elements to float to the left or right so that other content flows around them, and was originally used to wrap text around an image. In modern practice, floats have been largely replaced by flexboxes and grids, but are still necessary to understand because they often appear in older codes. After floating, the container is usually cleaned with clear or clearfix techniques.
Key points
- Float: left and float: right makes the element float so that the content flows next to it.
- The elements float out of the normal block groove and shrink in size according to the contents.
- Clear: both stop the influence of the floating element on the next element.
- Containers that are floating in the water should be cleaned at high altitudes, for example by overflow: hidden or clearfix.
- For new layouts, flexboxes and grids are generally easier than floats.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.