CSS Floats & Clearfix

Показать описание

Official site

Twitter

Рекомендации по теме

Комментарии

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!

gewrgewr

@codecourse I still can't wrap my head around this concept. I just don't understand how clear fix work.

rawadmerhi

I'm really liking this random tidbit style thing that's going on. Keep it up please!

firekid

best explanation I have watched so far. Thank you Alex.

edgarpan

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!!

QuailStudio

Thanks mate!!!, a very resourceful way around the issue.

XJerome

awesome explanation. my book, nor my college slides couldn't explain it properly. thank you!

XQzmeeMusic

Thanks I never thought of using pseudo elements for this!

ErikOrjehag

I always see this in my udemy lectures but haven't commited it to memory (which is why im here). I tend to forget that elements with float property are removed from the document flow so the sizes stay unknown for the parent element (as nothing is contained in it) so thats why the container collapses

alexluu

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; }

memii

what color theme is it you are using in sublime text???

mkdk

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

glgeorgiou

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?

HookemHorns

I don't think this is the right place to use clearfix. Your container "disappeared" because it had no height, once you added float to those 2 boxes, your container became empty, it bacame just an empty <div>. If you had just added height:100px; to your container everything would be fine. :)

nabukodonosor

5:30 What? I don't understand why you couldn't have just done clearfix:after on its own before? (I know that doesn't work, but just don't understand why) But thanks for the video, it helped.

petrockspiracy