The ultimate mystery: The core element of clearing float is to solve the problem of the parent element collapsing after floating out of the document stream. That is, to make the parent element tall enough to contain float elements, there are several common ways around this. Let’s take a look

1. Add height to the parent element

I don’t think I need to explain this

2. Add an empty div at the end and add clear:both to the tag

In the mastery of CSS in this book, on the detailed mention of this method, I say in this general, interested partners can go to see, although the book is a little old, but it is still a book worth going to see, specific clear: The principle of both also follows the ultimate mystery. The browser will add enough top margins to the cleared element so that the top edge of the element drops vertically below the floating element, allowing the parent div to automatically get height and contain the floating element

3. Clear float with after pseudo-element

This is the current recommended usage, part of the code below

.container .top .right:after{
  content: "";
  display: block;
  clear: both;
}
Copy the code

4. The last one is to add overflow: Hidden to the parent element. The principle is to trigger the BFC feature that also counts the height of the floating element

Landing the link