.clearfix::after { content: ""; display: table; clear: both; } Or for overlapping text due to floats:

.container { position: relative; } .text-block { position: absolute; top: 0; left: 0; z-index: 2; } .covered-div { position: relative; z-index: 1; } Problem: Floated elements or negative margins cause text to overlay another div.

body { padding-top: 60px; /* height of fixed header */ } Problem: Grid or flex items overlap because of negative margins or absolute children.