Join Morten Rand-Hendriksen for an in-depth discussion in this video Floating and clearing content, part of Making Sense of the CSS Box Model.
- Positioning content relative to its original position, … ancestral container, or the viewport is all well and good, … but if you want to truly lay out and design a document … we need to be able to place boxes next to one another. … In traditional CSS, this is done using the float property. … Using the float property, … we can visually float a box to the left or right … allowing for the adjacent content to fill in … the newly available space. … In traditional printing this is equivalent to text wrapping, … but in web design we often use the float property … to position multiple boxes in a layout grid. … Using the float property is both straightforward … and confounding due to its effect on other content. … If you float an element, say an image, … left and set its width to 50%, … the remaining 50% of the space will be filled … with the adjacent content. … In this situation, the floated box appears on top … of the top left corner of the adjacent box … and the content is moved out of the way …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes