In this example, why does container need to have the pseudo-element after and before with content: '' and display: table to show the gray background? Shouldn't container automatically expand to fit both of its children and then fill out the negative space with the gray background without the pseudo-elements already?
Add a comment
|
1 Answer
This is called a 'clearfix', when a container has all of his the childs floating, you have to use a clearfix on it. I put a black background in the container:
With clearfix: https://codepen.io/anon/pen/GvoEjx
Without clearfix: https://codepen.io/anon/pen/NvxgRe
https://css-tricks.com/snippets/css/clear-fix/
.container:before,
.container:after {
content: "";
display: table;
clear: both;
}
7 Comments
jhpratt
Additionally,
display: flow-root is now an option in some browsers, for which the explanation of how it differs from clearfix is quite technical.
stackjlei
clear:fix doesn't allow elements to be floating above it, but in this situation how does it affect whether the container element get a background or not?
stackjlei
Also for that example, why do you need it in the
before? Don't you just need it for the after?
jvitoroc
The element get a background in any case, but without clearfix, The container cant get The height of The content, in other words, we cant see The background @stackjlei
BoltClock
You might as well not bother answering the question in that case.
|