From the course: CSS Layouts: From Float to Flexbox and Grid
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
The float property - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
The float property
- [Narrator] In the early days, websites were often recreations of common layouts used in print media, such as brochures and magazines. The float property was introduced to implement simple layouts such as text wrapping around an image. The element is moved to the left or right of its container and removed from the normal flow. Floating an element changes the behavior of that element and the elements that follow it. The float property has four values. None, which specifies no floating at all and it's the default value. Left and right, floats the elements to the left or right. And inherit, which specifies that the float value should be inherited from the parent element. Since float could be applied to any element, it wasn't long until entire layouts were created by floating sections of the page, creating columns inside bars. With the standardization of flexbox and grid, float can go back to being used for its original purpose.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Inline and block elements1m 53s
-
The box model properties3m 32s
-
The display property5m
-
The box model and layouts3m 17s
-
The float property3m 19s
-
Clearing floats5m 46s
-
Setting up your project3m 8s
-
Exercise: Build a layout with float9m 54s
-
Position: Relative and absolute5m 15s
-
Position: Fixed, sticky, and static4m 31s
-
-
-
-