The float property is used for aligning elements by changing the natural page flow. Learn about he ins and outs of using the float property.
- [Instructor] Float is another property…that can be used to rearrange how elements are displayed.…Let's go over what the natural page flow looks like first.…By default, block level elements are displayed stacked…on top of each other and take up 100% of the width,…in the order of how it's written.…Inline elements stay within their context,…since they only take up the amount of space…as the content contained between the tags,…they are displayed within the line.…The parent element wraps the content…contained in the child elements.…
Using the float property won't remove elements…from the natural flow, but it will change it…by aligning blocks to the left or right of its container.…This changes the natural flow, because the elements…following the floated elements will be disrupted.…Let's try this out in an example.…The pink background in this example…has been added to the parent element,…just to visually show that it is wrapping…its nested elements.…Now if I add float left to the image,…and run it, the paragraph following it…
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property
Skill Level Beginner
1. Getting Started
2. CSS Core
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.