What is BFC? How to clear floats using CSS pseudo elements

BFC Concept:

The block formatting context is an independent rendering area that isolates the elements inside the BFC from the elements outside it, so that the positioning of the internal and external elements will not affect each other.

Let us first understand a term: BFC (block formatting context), which means "block-level formatting context" in Chinese.

First remember a principle: If an element has a BFC, then no matter how the internal elements change, it will not affect the external elements. Therefore, it is impossible for BFC elements to have margin overlap, because margin overlap will affect the elements outside; BFC elements can also be used to clear the impact of floating, because if it is not cleared, the floating of child elements will cause the height of the parent element to collapse, which will inevitably affect the layout and positioning of the subsequent elements, which is obviously contrary to the setting that the child elements of the BFC element will not affect the external elements.

The following situations trigger the BFC:

• <html> root element
•The float value is not None
• The overflow value is auto, scroll, hidden
• The display value is any one of table-cell, table-caption and inline-block
•The value of position is not relative or static, that is, position: absolute/fixed

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

Use pseudo-class elements to clear floating:

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

Summarize

The above is the CSS method of using pseudo-elements to clear floating that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!

<<: Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP

>>: Web Design Experience: Self-righteous Web Designers