From the course: Responsive Layout
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Floats
- [Instructor] A common way to lay out webpages before Flexbox and Grid was using floats. A float in CSS says the block elements should wrap around other elements instead of starting after the element. It was originally created to allow text to wrap around images. You see this in something like a newspaper or magazine where you want to take up all the available space on the paper. On a website, you would want to do the same if you have an image mixed in with text. This is what the page looks like without float. You have a paragraph, then the image starts right below it, then the next paragraph below the image. To get the text to wrap around the image, you give the image a property of float with a value of left or right, so in the code here, I have a photo which has a class of photo, so that's how I'm going to style it, so photo, and then float colon left, save, and refresh, and now everything after that photo goes around it, taking up the available space to the right of it. The text…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.