CSS Floats and Clears Explained 

To summarize float: When you float an element, what you do is you remove that specific element from natural element flow, but inline elements still respect its boundaries, where block element does not, so thats why element or (both block elements )will collapse, because they don't 'sense' anything is there. I like your examples Travis.

That music is REALLY distracting.

dude, you should get rid of those background music, its really annoyinng and distracts...

hahahaha, i didn't even notice the background music until I read all the comments talking about it. When I'm watching tutorials and stuff online I always have background music playing to help drown out regular sounds that happen in the house, thus helping me focus. This video was great for me, and extremely helpful!

Caught up on all your videos now, really been enjoying the content and it has been super helpful. Looking forward to your future content.

I'm taking the grand tour of your videos. This is easily the most comprehensive video I've seen on the subject.

Hey man! I stumbled upon your channel only a couple of days ago, and I must say that your content is amazing and you are a very good teacher! I just started using SASS today all because of you, and it's so much better than writing all the CSS myself. Keep up the good stuff, and you just got yourself a new subscriber :)

Thanks for this brilliant video! I've been subscribed to your channel for a good few weeks now and keep unearthing some little gems of series and videos you've done. Needless to say I've managed to binge-watch a lot of them during lunch at work :) For me, floats have always been a bit of a taboo subject - We all know they're there; but just don't talk about it. I've used them quite a lot (sometimes well, others appallingly); but never really really understood why/how they work... until this video. Very good explanation and nice examples! Keep it up! =D

Great stuff, just created my first float grid. Even cleared it afterwards into a container with no problems at all. Thanks for making it so easy to understand, your visual examples are great too.

I will go back to this video over and over to better understand lol. BUt then again this video is a great reference. Thanks Travis. :)

Bro, thank you, I learn alot in your videos., just thank you.

Man, this + the positioning video has really been helping me out. Thanks!

FYI, I just went to the codepen link and the examples of floats with many boxes are not displaying any of the boxes. I didn't investigate why but tried it in jsfiddle with the same effect pretty much. Also, love the self-deprecating humour with all the drawings added to your head :) It's why I watch you regularly. Found the problem! The newer bourbon mixin 'size' wants something more than just a number and adding 'px' makes things work again. .box +size(100px) background: lightblue

Hello Travis , Thank you! I watched your first videos, just when you started. I have been following you the whole time.. from the point were I knew absolutely ZERo about html, CSS. And today, where I have started, make beautiful stuff, and even implementing some scripts and php/mysqul. Never in my wildest dreams would I believe I could get to this point. Because I am an artist.(that kind of hate computers) But wow, Artists must use the web! It's a big chance to make a better living. And you have guided me through something really hard and heavy. You just explain this so well! And on the same time inspire with you great design skills.(And video skills) and also the video eye contact. I think that the eye contact. That is why you reached me. (And probably other artists out there). So thank you ! a lot

Best float and clear video I found, thanks!! There may be cool stuff in the comments as well but all the complaints about distracting was clogging up the system. To be honest, I didn't care for the music since I am a metal fan so I ignored it. I did appreciate the humor and drawing. It helps break it up, but I am a software guy so maybe others may have a more difficult time. Thanks again!!

very interesting video with animated drawing stuff. subscribed! btw, how did you edit this video? what is the software you use?

Thank you so much!!! I have to go over this again (who knows how many times? ) but I think it holds the answer why my divs went nuts, along with the text in them, when I changed browser size. I'm going to check out your other videos.

thank you, many other tut of yours are also immensely useful, whenever in doubt i come here to clear.

You can tell what kind of people a lot of developers are. "Stop with the childish drawing, this is not allowed to be fun!" Thanks so much for your video! I've really been struggling with layouts because I never understood floats and clearing, and I think I've gotten it now!

THANK YOU, THANK YOU, THANKYOU.. you helped me fix all of my code today for a project I am working on for college!! I'm still learning web dev and your videos are helping me so much!! :)

Hey Trav. I also use the empty div technique to clear floats. I did try Pseudo classes before but I couldn't get it to work properly, although I didn't display it as a table. mmm

Man you are so inspiring! Thanks for all the help im getting from your channel, it's just priceless.

Sry but the bg music is so much annoying... Can't focus on what you say... =/

Hi, you are great! I am really glad that I have found your videos and I've subscribed. I am looking forward to watching new tips. I am planning to watch all of your videos!

Like your teaching style. LOL on the class of 'sup'. Your drawings and the music (though not my fav) help keep things fun and engaging. Thanks. The pen is still there. Nice to have ready-made examples to play with. Helps reinforce the lesson content.

I love the way you explain everything. Please provide one class to introduce simple things in html, bootstrap and css. or How to answer the following questions in interview.

thank you , it is very very useful. the only thing You are using sass for css , and it might be confusing for starters like me

Music and weird doodles in facecam are strange and distracting but overall great and very informative video. Thank you!

Hi there...! DevTips I can`t express my thanking words for your this very best job.I really appreciate..I learnt a lot from these tips and tutorials.. I think I need to learn webs behaviors with JS. Thanks

I absolutely love your videos. You have made me a lifelong fan!

Love your videos man. Superb!

let me clear my float! bananana-na-na-na... bananana-na-na-na....

btw, the music is not distracting. Actually, it makes me learn faster. Thanks.

Great video Travis but missed the bgm this time. can u explain what are those a:after and a;before really mean?

You are great. Love your videos.

Thanks alot for the link man :D it will really help me as i learn to use css positioning attributes :D

Thanks Travis, it really cleared my mind about floats ;-)

Great video, thanks for sharing

Damn.... You literally saved me. Thanks a lot 😍😍😍

Omg this is exactly what I need. I just start coding a few days ago and my head explode when I try to put floating things where I want it.

Thanks. Very useful tutorial!

this really helped me. thank you!!

Actually, I already understand... Idk but, it is so interesting to watch you explain them lol

hey great video!! much better than my $500 course! whats the software you use to do ur utube videos? editing them and adding ur cartoon graphics? thanks

Another thumbs up.. Great job

Great vid, nothing wrong with getting those fundamentals down. thanks

Nice vid, bro. Thanks!

Awesome background music 😎🎧🎶 I like to listen music while coding

This video's great as both an instructional guide and ADHD simulator.

Thanks Bro. This video is awesome.

Buddy, you made my day today. UI is easier for me because of you ;)

Hey, I am very glad to find your channel. I am only the Padavan of Front-End, but my goal is to become a Jedai, just like you. I have a question. I read that float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes. Is it correct to use floats and clearfix hacks on div elements instead of display:inline-block?

man you are good at this teaching stuff =) can you recommend or do a video on pseudo-element

You are always awesome thanks 🙂

What a great guy!!! =D

Hi I am still rather confused as to the difference between "Many floats, not floating" and "Many floats, No words" . I tried exploring the codepen link however i could only noticed that the former shrinks/expands 100% relative to the width of my window while the objects in the latter wrap down when there is no more space toward their right? Wonder if my ramble makes any sense to you hope you could help with that thank you so much been watching and gaining loads from your videos! :)

thanks , very good video and simple explanation, you deserve thumb up.

Wow, thanks for sharing your codepen!!! I'm stuck on floating a simple navigation with the image and text being the logo on the left and trying to float the navigation to the right so they are even with each other. *sigh*!

I have a question on your shorthand css: "&:before". What is the ampersand for? And why do we sometimes use ::before and :before? Thanks.

you are nice teacher...

I just found your videos a couple of days ago. I think they are fantastic. Can you create a video about the before and after css tags? I purchased templates all the time from some of the templates stores out there and I see the designers use the :before and :after tags a lot Thank you Ricardo

What about using „oberflow: auto“ on the parent element of floating elements?

you saved me dude !

thats strange. i find music helps my brain think better and stay on track. i liked it

please don't draw on yourself, it's distracting

Thanks very helpful.

Floats are kind of yesterday...in the toilet bowl of web dev...never to come back...I think I heard a flush...

AHHHHH so much to remember

Good vid man, gonna post on twitter.

thanks man!!

you are awesome .....

Greart videos I love it!

thank you!!!

When you try to focus on the code... his face pops back up and of course the annoying music

music is very annoying and no need for selfie but explanation is good thank you!

Having some problems catching up with you at 4:30. The "No float,no words" thing made sense,because i can see the div that holds the img(pinkie one). But in the next where you use float,the div...dissapears?Why?

Hi, just looked into codepen to see your code and it has been changed because it does not show the blue cute square boxes lined up in the "Many floats, No words" & "...last one clear". Can you update it to include these divs. Thanks,

apart from music thanks alot :)

Thanks for this I am just learning the div tag. Is there a way to get a third "column" in on the right? Or would that be more of a table thing? I am taking over for someone, and I'm really not that knowledgeable and learning by the seat of my pants.

ah,i was so pissed cause i never mentioned the position type ...and kept putting all the value,STUPID.... thanx real useful

that music is pure evil

If I want to add another div below all of those floats, it ends up in the upper left corner of the parent , on top of the first floated div. How do I get around it? But if I add an extra div with a class with clear:both on the ::after, it works. But then that's an extra unwanted element..

the 1980's porno instrumental makes learning fun! Good stuff!

the music is good but its distracting my attention. Nice explanation.

Great 👌

Does anyone here ever give the surrounding div the property 'display: table;' when floating the contents? This way your div will keep the size of its children in mind, sort of like adding a clear after the floated objects.

How about adding overflow:hidden property on the parent of float elements instead? It certainly feels more semantic.

HELP HELP !!!! hi i am going to start blog on wordpress.... i want my blog load fast... any recommendation for hosting ? actually i dont know hosting is important part to consider

maybe you can change to some more chill music

Thanks!

i don't understand, why to write .cf:before, .cf:after{content:"";display:block} .cf:after{clear:both} when we can just write all these properties for .cf:after. Travis, explain, please, why it is necessary to write it also for .cf;before

Do u have twitter Travis so I can mention u in the tweet?

+Devtips thx bro

Ever have one of those teachers that puts you to sleep? This is digital tryptophan.

can u write me the css for that you used ?

Writing a "clear" property for a div or any other element means to push that div onto new line where it becomes a proceeding one, if it has been declared as floating element. Isn`t it????

I would turn that music down, or put one who's less distracting :) Thank you for the video.

Whenever I tell my section elements to float they aren't. One is suppose to float left and one is supposed to float right. Neither of them are floating I don't know what to do.

I almost never use float with flexbox available. Is it normal?

Great explanation but the background music is really distracting.