Hey @sharon_c, yes you are right, clearfix is used to keep the floated children elements within their parent element. The absence of a clearfix declartion on the parent element causes it to loose hold of the children element within it.
One of the ways to implement clear fix is exactly what you did mention: adding another block element (like: <div>) with a clearfix property applied to it. Like so :
div {
clear: both;
}
The other approach is better and cleaner than first. Unlike the first which requires an addition of an html markup (<div>) all for the purpose of keeping floated child elements in place their parent, this approach requires no extra html markup to convolute your beautifully crafted, probably component based html markup. This should do the same trick as the first approach did:
div:after {
content: "";
display: block;
clear:both;
}
Note that the <div> in the above code snippet is the <div>housing the floated child elements.
Another snippet showing the same implement of clearfix with the second approach:
Assuming we have an html markup like so: <div class="container"> <div class="item item-float">Item 1</div> <div class="item item-float">Item 2</div> <div class="item item-float">Item 3</div> </div>
Now to keep the <div> elements with class of .item within their parent container with class of .container, we add this piece of css. .container { width: 80%; margin: auto auto; border: 1px solid red; }
/** This is what does the clearfix magic */
.container:after {
content: "";
clear: both;
display: block;
}
.item {
width: 45%;
height: 100px;
border: 1px solid blue;
}
.item-float {
float: left;
}
Hope this helps.