Check out this post: Understanding clearfix
The most helpful response indicates that the clearfix should be applied directly to the last floating element:
To incorporate a clearfix, you simply need to
include HTML code:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
</div>
as well as CSS code:
.clearfix:after {
content: " "; /* To address older browsers not supporting empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Nevertheless, when attempting to add clearfix to a floating element, it does not function properly (evident in the snippet below) :
.clearfix:after {
content: " "; /* To address older browsers not supporting empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
div#container {
background-color: green;
width: 50%;
display: block;
margin: auto;
}
.floating {
float: left;
margin: 1px;
background-color: yellow;
}<div id="container">
<div class='floating'>1</div>
<div class='floating clearfix'>2</div>
</div>Upon examination of the outcome, the height of #container continues to remain at 0. It appears that the clearfix is ineffective and cannot be directly added to the final floating element. Is this accurate? Any suggestions on how to resolve this?