+ 2

please elaborate the use of 'clearfix' property !

15th Jul 2016, 3:57 PM
Mohammad Aiesh
Mohammad Aiesh - avatar
4 Answers
+ 4
A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements A clearfix is performed as follows: .clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; }
16th Jul 2016, 5:57 PM
Awele Omeligwe
Awele Omeligwe - avatar
+ 3
Normally you would need to do something as follows: <div> <div style="float: left;">Sidebar</div> <div style="clear: both;"></div> <!-- Clear the float --> </div> With clearfix, you only need to <div class="clearfix"> <div style="float: left;" class="clearfix">Sidebar</div> <!-- No Clearing div! --> </div>
16th Jul 2016, 5:59 PM
Awele Omeligwe
Awele Omeligwe - avatar
+ 3
For new browsers, just set display: flow-root would make clearfix at the end of the container.
28th Jun 2020, 5:44 AM
CalviŐ˛
CalviŐ˛ - avatar
0
understood !
16th Jul 2016, 6:02 PM
Mohammad Aiesh
Mohammad Aiesh - avatar