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

This article is about how to understand the Formatting context in the W3C CSS2.1 specification. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

Ormatting context

We think of web pages as made up of many boxes, and the way these boxes are displayed is determined by the display attribute.

Here comes a concept called Formatting context (format context):

Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page, and there is a set of rendering rules that determine how its child elements will be positioned, as well as their relationship and interaction with other elements.

Types of Formatting context

Block fomatting context (BFC): block-level formatting context

Inline formatting context (IFC): inline formatting context

Flex formatting context (FFC): flex layout in CSS3

Grid formatting context (GFC): Grid layout in CSS3

What is the cause of BFC contact?

I believe that many people understand the concept of BFC because they are thinking about why doing so can "clear floats" and search for results related to BFC. So let's expand it first:

Q: when floating, the text will not overlap. Why?

The answer from the network:

When you use float to detach from the document stream, other boxes will ignore this element, but the text in other boxes will still make room for this element and surround it.

Q: why can I clear floats with the clear property?

First of all, there is a premise that the clear attribute can have an effect only if it is assigned to a block-level element. Http://www.smxrlyy.com/ of Sanmenxia Gynecology Hospital

Then from MDN:

When applied to a block that does not float, it moves the border of the block below the outer boundary of all related floating elements. When this behavior works, it will cause margin collapsing to fail.

When applied to a floating element, it moves the outer boundary of the element below the outer boundary of all related floating elements. This affects that the position of the later floating element cannot be higher than that of the previous element.

Another most common way is to use overflow:hidden to clear floats, and its principle is related to BFC.

Conditions for triggering BFC

Floating element, float value other than none

Absolute positioning element, position is absolute/fixed.

Display is one of the following values inline-blocks, table-cell, flex, table-caption, or inline-flex.

The value of overflow other than visible (hidden,auto,scroll).

Fieldset element

Characteristics of BFC

If a BFC is formed, a separate block is formed. There is no interference between blocks, so floating element blocks do not overlap.

The following is a search for some features from the web:

If the two adjacent block boxes do not belong to the same BFC, their outer margins will not be superimposed. (margin collopse) the result confirmed is wrong!

In general, as shown in the following figure, the 40px should have been separated, but there will be overlap, resulting in a larger distance between the marginTop of box 1 and the marginBottom of box 2:

Margin collopse

If we add overflow:hidden to box1, overflow:hidden to box2 or both, it won't solve the problem. (I don't know if I misunderstood it, but I call it a mistake at present.)

The BFC border and internal snap child elements do not overlap:

The border of a BFC cannot overlap the outer margin of the elements inside it, so adding a negative outer margin to a floating block-level formatting context will not work.

In addition to the overlap between the neighbors above, there will also be overlap between father and son. If you don't add overflow to the father's box below, the child in it will always be close to the father's border, and parent will separate the child from the test by taking the child and the largest value in its own marginTop.

Margin collapse

In addition, the quote here says "negative margin does not work", which is also found to be wrong after testing.

The box height contains floating elements:

The element that created the BFC is a separate box, and the child elements inside do not affect the outer elements in the layout, and vice versa, while the BFC still belongs to the normal flow in the document.

It is the floating elements in the BFC that can support the box.

The area of BFC does not overlap with float box:

That is, if two boxes are glued together, one is BFC and the other is float (in other words, float is also BFC), they will not overlap.

Expansion: hasLayout

Use the attribute of * zoom: 1, which is an IEhack, because IE6-7 does not support W3C BFC, but uses the private attribute hasLayout.

HasLayout is very similar to BFC in terms of performance. HasLayout itself has many problems, which lead to a series of bug in IE6-7.

Conditions under which FFC triggers FFC

Display: flex

Display: inline-flex

Different from BFC

The following are from the network:

Flexbox does not support:: first-line and:: first-letter pseudo elements

Vertical-align has no effect on child elements in Flexbox

The float and clear attributes have no effect on child elements in Flexbox, nor do they detach them from the document stream (but have an effect on Flexbox itself!)

Multi-column layout (column-*) is also invalid in Flexbox, which means that we cannot use multi-column layout to arrange the child elements under the Flexbox.

Child elements under Flexbox do not inherit the width of the parent container

The above is how to understand the Formatting context in the W3C CSS2.1 specification. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.