HomeОбразованиеRelated VideosMore From: Codecourse

CSS Floats & Clearfix

415 ratings | 33429 views
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Html code for embedding videos on your blog
Text Comments (56)
Самый удобопонятный задание
QuailStudio (6 months ago)
I never understood why people uses a "clearfix" hack, I was always under the assumption you should never leave an <div> without CSS properties in this case the original countainer <div> only has a property of background -color. it makes sense to me it would just collapse by default. According to what you want to achieve, I would just give it a property of>> width: 100%; float: left; height: auto; and that's it. I don't get why people use this weird "clearfix" hack, don't assume the browser know what you wanna do with your html elements, so don't leave your element styling to luck and you'll be fine!!
Stefano Bisio (7 months ago)
Old but gold
Raphael Kassim (9 months ago)
thank you so much this explanation
Jerome Vargas (11 months ago)
Thanks mate!!!, a very resourceful way around the issue.
NuDraft (1 year ago)
awesome explanation. my book, nor my college slides couldn't explain it properly. thank you!
Edgar Pan (2 years ago)
best explanation I have watched so far. Thank you Alex.
Guram Kankava (2 years ago)
Thank you very much!
Jeanne McCabe (2 years ago)
Has anyone tried this code, linked the files, and renders with collapsed container? Mine was collapsed.
i still didnt understand *zoom = 1; but i learned now how to use clear thank you
Lawrie Platt McWall (2 years ago)
Hi! Thanks for the vid - can you explain what content: " "; does??
Ash B (2 years ago)
It puts an invisible element in the dom. This is necessary because the clear property needs to find something after the floated element(s) to be able to contain the floated element(s). Doing this is an alternative to adding an extra div, which is what the 'row' in bootstrap is there for (bootstrap cols are floated).
BaconKwagga (2 years ago)
rubbish
Midsummer light (2 years ago)
'clearfix' is just waste of time,code,memory..just use 'float left'.Ex: . container{ float:left; } . left{ float:left } . right:{ float:right }
Practice Repeat (2 years ago)
internet explore is useless now... skip the ie part
Alex Marshall (2 years ago)
+Practice Repeat Why would you skip adding 3 lines of code just because you don't like internet explorer? 6.2% of people still use IE (more than the amount who use safari).
Rawad Merhi (2 years ago)
@codecourse I still can't wrap my head around this concept. I just don't understand how clear fix work.
Rry Lee (3 years ago)
This is best practice! https://gist.github.com/RryLee/8beaaf735e4381bfc767
gewrgewr (3 years ago)
Thank you soooo much!!!! I wish I had found this piece at once rather than browsing across the entire world wide web in search of a clear explanation!!! Guys, you are outstanding!
Dániel Farkas (3 years ago)
very understandable and straightforward, thank you!
James Bond (3 years ago)
Thank you a lot for this video it's really quite useful !
HookemHorns972 (4 years ago)
I'm still having a hard time understanding the content "" and :before and :after properties. Any videos or somewhere I can go to get a good understanding of them?
HookemHorns972 (3 years ago)
+MrSyanArt I'm still lost.
SyanArt Station (3 years ago)
I'm a n00b here but I understood that [content: " "] is only for Opera navigator. and the before and after is important because it allows to create some sort of a "segment" where the command "clear" is triggered.
Patrick Fiset (4 years ago)
thanks, why not just .clearfix{     overflow: hidden; } this way, no need of pseudo :before/:after
NetSc0pe (1 year ago)
This can create some unnecisearily scroll bars and cause some more problems.
Eduardo Jardim (1 year ago)
Different approaches to have a responsive grid on the screen. Using the overflow property also works in most cases, however you´re saying that the browser can hide your content if necessary and in some specific situations the browser will use this permission you gave it.
Dan Roden (3 years ago)
was thinking the same thing... works for me
mk88dk (4 years ago)
what color theme is it you are using in sublime text???
Codecourse (4 years ago)
+mk88dk Mac Classic.
Stefany Dyulgerova (4 years ago)
Sexy voice BTW :P
Stefany Dyulgerova (4 years ago)
Thanks Alex - but why the hell didn't they make it so that the float property doesn't make the parent elements collapse? :(
AndreAgonia (3 years ago)
+Stefany Dyulgerova exactly, pretty weird but maybe there's a historical reason...if someone knows hope they point that out!
Stefany Dyulgerova (3 years ago)
+AndreCorner IDK, maybe they will fix it in the future versions of CSS. Because now the floats act as mini nukes, LOL.
AndreAgonia (3 years ago)
+Stefany Dyulgerova I'm wondering the same to be honest, from my experience whenever you make a float you'll be forced to clear both after the elements you floated...so why not just removing the way the browser collapses stuff?
Adrian Maenzanise (4 years ago)
thanx a lot for the work that you do. It really make a big diiferrece
Memi Sahitolli (4 years ago)
I use a much simple solution to this problem. let's say i got your layout with a container and two boxes inside it. After the second box i put a <br class="clear">, and in the stylesheet the class clear looks like this: .clear{ clear:both; }
Alex Marshall (2 years ago)
+Memi Sahitolli This may be simpler if there's only one place you need to apply the clearfix, but if you have dozens, you would have to add "<br class="clear>" after each, instead of just adding a class of "clearfix" to the container.
Interesting but i've got a couple of questions: 1. Why didi you use (content: " ";)? 2. How can you wrap a text put inside the small boxes? Thanx
Thanos Paravantis (4 years ago)
+Γιώργος Γεωργίου To put text inside a box, you just write <p>Text</p> inside the box class.
jess raa (4 years ago)
content for opera hear him watch
khalil dureidy (4 years ago)
thank you
khalil dureidy (4 years ago)
an alternative solution is to use Bootstrap clearfix class, but it will not work with old browsers
Caleb Lewis (4 years ago)
I'm really liking this random tidbit style thing that's going on. Keep it up please!
Ompmega (4 years ago)
Thank you so much!
tal22288 (4 years ago)
nice video ! . Please make more css tutorials ! :)
Jeremy Karlsson (4 years ago)
Flexbox please.
awychoi (4 years ago)
Well, even if it is called dog or cat, as long as it works, who cares what it is called...so why the debate?
Alimon Pito (4 years ago)
I am facing this problem in bootstrap, good explanation tutorial.you are awesome !! 
Barik Buddy (4 months ago)
If you are start learning css. You should not learn bootstrap at begaining. Because it will not let you an amazing developer. Thanks
ArnoldsK (4 years ago)
overflow: hidden; and clear: both; what is the difference?
Kristian Daugaard (4 years ago)
+Arnolds Kļavenieks Overflow hidden does not do the same thing. Read up on the two css properties, you will find that they have nothing to do with each other
ArnoldsK (4 years ago)
+Kristian Daugaard  but overflow: hidden; does the same thing plus less code
Levente Hallai Seiler (4 years ago)
+Kristian Daugaard "but if he instead wrote: overflow:hidden; he would still have a 0px tall div, but the floated elements would be invisible because they are out of the border of their parent. Hope this makes sense. :)" I think that is not true. The container is not 0px: jsfiddle.net/5kuVy/
Kristian Daugaard (4 years ago)
There is abig difference. Look at it this way: When you float an element, or position an element absolutely, that element won't take up any space on the page, this has some uses. But if you want to avoid this you can do a clear: both; to make flaot stake up some of the space of the document. Overflow hidden is entirely different. What overflow:hidden; does is that it hides everything inside a given element, which goes out of the border of the element. Lookup the css-box-model if needed. In this video, he clears the container div, so that its height is affected by the floated elements, but if he instead wrote: overflow:hidden; he would still have a 0px tall div, but the floated elements would be invisible because they are out of the border of their parent. Hope this makes sense. :)
Erik Örjehag (4 years ago)
Thanks I never thought of using pseudo elements for this!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.