Example in Video of Clearfix

I think the mechanics behind clearfix are somewhat glossed over because a lot of people just copy-paste it in - the exact code used here can be found in multiple places online as the current standard for clearfixing, so for now, you just need to know "this is how I fix this problem". Some of the explanations for why it is done exactly this way are pretty in-depth, and I get the feeling the intent was not to detract from the intended subjects of the course by spending too much time explaining why clearfix does what it does.

That being said, I totally get what you're saying, since I also hate not understanding what goes into what I'm doing, so here's a bit of a breakdown, starting with our clearfix code:

.group:after { 
    content:""; 
    display: table; 
    clear: both; 
}

1. group:after - this is creating a pseudo-element after the item with the class "group"
2. content: "" - this just means it's invisible - we're not actually drawing anything there, it's just a placeholder
3. display: table - we need a block-level element so it extends across the entire width. Why table and not block, you may ask? Table also prevents collapsing margins, which can happen under certain circumstances - it's a bit more of a catch-all for potential problems
4. clear: both - this means that no floated elements are allowed to the left or right of the pseudo-element. The point is to ensure that it gets pushed underneath any floated elements, since they are not allowed to occupy the same space.

I hope this is helpful!

Thanks, Katie for taking time to write this super helpful explanation! Added these as comments to my code for future reference.