Menu
I am using twitter bootstrap, i have an issue with clearfix class in bootstrap. My html is :
<div class="pull-left">This is a text</div>
<hr class="clearfix" />
What i am expecting is horizontal line should come in next line of displayed text but it renders at right side of the text. And if when i use style='clear: both;' in hr than it works fine. Why clearfix not doing the same as clear: both does ?
564
Clearfix property clear all the floated content of the element that it is applied to. It is also used to clear floated content within a container. Example 2: With clearfix property. Without using the clearfix class, the parent div may not wrap around the children button elements properly and can cause a broken layout.
The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.
A clearfix is a way for an element to clear its child elements automatically without any additional markup. The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally.
A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally.
The class clearfix should be applied to the parent container element
<div class="clearfix">
<div class="pull-left">This is a text</div>
</div>
Demo: Plunker
140
Try the following:
<div>
<div class="pull-left">This is a text</div>
<div class="clearfix" />
</div>
<hr />
In this case empty clear div is placed next to right of your pull-left div and does clearing.
The matter is if you use float: left on the element then it becomes float and the next element after it is placed to the right if there is a free space for it. So you should place all the elements you need to be float with float: left (say pull-left) in a row and close this sequence with float: none; clear: both (say clearfix) to stop floating.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
