Although, using floats is outdated, you might see this out there. So, when your height collapses in a float, there are two ways to fix it. Adding the following, will “clear up” and bring the height back (background color to your floated header) to your project.
1. In your HTML, add a empty div class:
<div class=”clear”></div>
In your CSS:
.clear {
clear: both;
}
2. Clearfix hack: It is cleaner. Nothing added to your HTML, except another class named “clearfix”.
Before in your HTML:
<header class="main-header>
You can add another class separating it with a space in HTML:
<header class="main-header clearfix">
In your CSS:
| .clearfix::after { | |
| clear: both; | Our previous code had both a left and a right float to clear. |
| content: “”; | Have to have content for pseudo elements, even if empty. |
| display: block; | Have to change the inline to a block display. |
| } |