I have a div which contains some thumbnails and contain few images which uses floats. But using floats the background image/color would shrink since the images float so there's no contents for the background image/color unless I fix the length and width of background image/color.
I then found online that by using this code my problem is solved.
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear:both;
}
I know how does clear:both works but I am not sure how did the content: " "; display: table;
fixed the problem. I kind of guessed it but can someone simply explain to me nicely?
Thanks in advance.
I added two images in case my bad explanation is hard to understand.
Edit. Thanks people. Didn't know this is called clearfix no wonder I kept on typing things like :after :before Pseudo-elements for floats or similar and I couldn't find what I need. But I don't think this question is much of a duplex because what I wanted to ask is how the clearfix works instead of clearfix vs floats.
Thanks Prashant for the link~