How to use pseudo elements to clear floats in css

What is BFC?

Block-level formatting context is an independent rendering area that isolates elements inside the BFC from external elements so that the positioning of internal and external elements does not affect each other.

Let’s first understand a noun: BFC (block formatting context), which is “block-level formatting context” in Chinese.

First remember one principle:

If an element has BFC, then no matter how the internal elements go up and down, it will not affect the external elements. Therefore, it is impossible for BFC elements to have margin overlap, because margin overlap will affect external elements; BFC elements can also be used to clear the impact of floating, because if not cleared, the floating child elements will cause the height of the parent element to collapse. , will inevitably affect the layout and positioning of subsequent elements, which obviously violates the BFC element. The child elements of the element will not affect the setting of external elements.

(Recommended tutorial: CSS tutorial)

The following situations will trigger BFC:

•Root element
•float The value is not none
•The value of overflow is auto, scroll, hidden
•The value of display is any one of table-cell, table-caption and inline--block
•The value of position is not relative and static, that is, position: absolute/fixed

Obviously, when we set the overflow value to hidden, we make the container element have BFC, so the floating child element child will not cause the height collapse effect of the parent element.

Use pseudo-class elements to clear floats:

.clearFix::after,.clearFix::before {
       display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
}
.clearFix { zoom: 1;}

Recommended related video tutorials: css video tutorial

The above is the detailed content of How to use pseudo elements to clear floats in css. For more information, please follow other related articles on the PHP Chinese website!