Shulou(Shulou.com)06/02 Report--

This article focuses on "how to understand the BFC of HTMLCSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand HTMLCSS's BFC.

BFC (Block formatting context) is literally translated as "block-level formatting context". It is a separate rendering area, only Block-level box (blocks) participate, it specifies how the internal Block-level Box is laid out, and has nothing to do with the outside of the area.

Layout rules of BFC

First, the internal Box will be placed one after another in the vertical direction. Second, the vertical distance of Box is determined by margin. The margin of two adjacent Box belonging to the same BFC will overlap (set according to the maximum margin value). Third, the left side of the margin box of each element is in contact with the left side of the block border box. Fourth, the area of BFC does not overlap with float box. 5. BFC is an isolated and independent container on the page. The child elements in the container will not affect the external elements. When calculating the height of BFC, floating elements also participate in the calculation.

Which elements or attributes trigger BFC

Root element (html) float attribute is not noneposition is absolute or fixeddisplay is inline-block, table-cell, table-caption, flex, inline-flexoverflow is not visible

Application of BFC

1. Adaptive two-column layout 2, clear internal floats 3, prevent margin from overlapping up and down

At this point, I believe you have a deeper understanding of "how to understand the BFC of HTMLCSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.