Ensures that an element self-clears its children.
:after
pseudo-element and apply content: ''
to allow it to affect layout.clear: both
to make the element clear past both left and right floats.float
to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>
.clearfix:after {
content: '';
display: block;
clear: both;
}
.floated {
float: left;
padding: 4px;
}
CSS, Layout
Evenly distributes child elements within a parent element.
CSS, Layout
Ensures that an element with variable width
will retain a proportionate height
value.
CSS, Layout
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.