Learn CSS float in 3 minutes 🎈

hey uh let's talk about the float property the float property positions an element to the left or right side of a container it's popular for wrapping elements around images in this brief example i have three images and two paragraph elements i think this would look a lot better if this text wrapped around these images so what i could do is that whatever element i would like to select i can apply a float property any elements that are floating are taken out of the normal flow of a document and all elements that follow after will wrap around them by setting my images to float left all images will gravitate towards the top left corner of my document it's as if we're reading them from left to right or we could float right then we're reading this right to left let me give you a different example images are inline elements here's a different example with block level elements this time we will create three boxes using a pair of div tags let's set the class equal to box we will have box one box two and box three and let's create some sample text create a pair of paragraph tags i'll type lorem and then tab to generate some sample text copy this paragraph and paste it two additional times let's say okay let's style our boxes so to select a class type dot then the name of the class so let's create some boxes the width will be 100 pixels the height will be 100. let's give this a border of one pixel solid change the font size to something readable like 40 pixels i'll text align center and let's change the color background select a color i'll pick tomato because i like tomatoes divs are block level elements after each element the entire width of our viewport is reserved to display this element so if i give our class box the float property it will be taken out of the normal flow of a document and all elements that follow after will also follow that pattern so they will float and wrap around any elements from left to right top to bottom if we're using left or this was float right it will be red right to left top to bottom if you would like a stopping point where your elements are no longer floating you can use the clear property so let's say with our paragraph tags i would like this text to stop floating i will use the clear property and set this to left if we're floating left or to the right if we're floating right or you can set this to both so yeah basically speaking with the float property it positions an element to the left or right side of a container and it's popular for wrapping elements around images if you need to stop floating you can use the clear property which is what we did here so yeah that is the float property if you found this video helpful you can help me out by smashing that like button leave random comments down below and subscribe if you'd like to become a fellow bro

Channel: Bro Code

Views: 58,547

Keywords: css position, css positioning, css position tutorial, css tutorial, css layout, css layouts, css positioning turorial for beginners, css positioning tutorial, css positioning for beginners, css float, css floats, float left, float right, css float left, css float right, css floating images, css floating elements, html float, css float property

Id: xIJvkm-CgFQ

Length: 3min 17sec (197 seconds)

Published: Mon Sep 06 2021