Learn CSS float in 4 minutes! 🎈

all right let's get started everybody so the float property the float property allows other elements to flow around it this is particularly useful with images and Block Level elements like div sections in my example I have a box that's made out of a div element it occupies the entire width of the space in my web browser and the elements afterwards are kind of pushed underneath it is possible utilizing the float property to have this text wrap around this Block Level element and we do that with the float property here's what we're going to do for this demonstration you will need two images I have an image of a Pokeball and another one of Pikachu feel free to pick your own images we're going to insert an image an image is a block level element I will set the source equal to B the name or the relative file path of that image so mine is pokeball.png but I'm going to change the height so it's a little bit smaller height equals let's try 150. I'm also going to create a few paragraphs of text in vs code you can type lorem then press tab to generate some text I'm pretty sure you know that already though let's create four paragraphs one two three four my first image is taking up the entire width of my viewport all this text is being pushed underneath to make this text wrap around this image and occupy that space we will set the float property of the image I'm going to give this image an ID though ID image one IMG one for short within my style sheet I will select the ID of image one set the float property to either left or right we'll begin with left though then save everything all of those paragraphs are now wrapping around the right side of my image because we're floating left I'll add a little bit of margin though on the right hand side margin right I think 10 pixels is fine and that looks pretty good you can also float an image to the right let's change float to be right and now the image is on the right hand side if I were to adjust the size of my window the text just flows around the image which looks pretty nice all right let's change that back to left let's create a second image we'll place the image between the second and third paragraphs so my second image is pikachu.png pikachu.png the height will be the same I'll give this image an idea of image two this image isn't floating again the text is not wrapping around the image let's take image two we will float this image to the right I'll add some margin to the left as well margin Dash left let's do 10 pixels yeah there we go that looks pretty good basically speaking the float property allows other elements to flow around it now there is one thing I want to show you all out of border around the body of our document let's select our body element I will create a border that is three pixel solid now check this out with my second image it's overflowing outside of the container that it's in the body of my document there is one change we can make to our container our body with our container I will set the display property to be blow Dash root now anything that's floating will stay within the container it's not going to overflow Pikachu is still within the Box alright everybody in conclusion the float property allows other elements to flow around it and that is the float property in CSS

Channel: Bro Code

Views: 15,939

Keywords: CSS float, CSS course, CSS tutorial

Id: oJe8G5XT_v4

Length: 4min 27sec (267 seconds)

Published: Thu Sep 21 2023