What are the various clearing techniques and which is appropriate for what context?
Topics
CSS
Edit on GitHub
- Empty
div
method:<div style="clear:both;"></div>
. - Clearfix method: Refer to the
.clearfix
class above. overflow: auto
oroverflow: hidden
method: Parent will establish a new block formatting context and expand to contains its floated children.
In large projects, having a utility .clearfix
class will be very helpful. overflow: hidden
might clip children if the children is taller than the parent and is not very ideal.