From the course: CSS: Display

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Flow-root and floats

Flow-root and floats - CSS Tutorial

From the course: CSS: Display

Start my 1-month free trial

Flow-root and floats

- [Narrator] Ah, floats. Everybody loves to hate a float. They look so nice when our text is aligned next to our images, maybe wrapping around them, but then something weird always happens. So here I've got an example in this code pen, you can see I have a section, I have a paragraph, I have my adorable kitten from place kitten. Your kitten might be slightly different but it will be the same dimensions, uh, in this lovely paragraph of text. And I am just going to go ahead and float that image because of course, image is an inline element. It is indeed in-line with the rest of the words in my paragraph, but it looks a little weird because of course the text aligned to the bottom of the image by default. So all we need to do is say img and then we can say something like float left, and uh, if you want to put a margin around it and so forth, you can do that as well. But this is what happens. We have this lovely…

Contents