Solution to BFC block-level context

first, clear floating

The floating element affects the position of its sibling elements and causes the parent element to be highly collapsed, and the method for clearing the float is:

Clear:both (applied on an empty div element or on the after pseudo class of the parent element) the clear property of the BR label <br clear= "All" > Floating parent element (triggering BFC) Overflow:hidden (triggering BFC Display:table or table-cells; (the triggering bfc,display:table itself does not produce BFC, but it generates an anonymous box, and the box containing "Display:table-cell" in the Anonymous box produces BFC)
Second, BFC (block formatting contexts, chunk-level format context)

Original address: Http://www.cnblogs.com/leejersey/p/3991400.html/demo link Address: http://kayosite.com/demo/bfc.html#bfc-1

In the above "detailed said clear floating", Kayo more detailed introduction of the BFC, that is, the protagonist block formatting contexts (blocks level format context), this article will be based on the BFC of the above part of the expansion, further explain the characteristics of the BFC.

However, before further explaining the BFC feature, Kayo first introduces another concept that is very important in the visual format model of CSS (visual formatting model)-the positioning scheme. The positioning scheme is the layout of the control elements, in CSS 2.1, there are three kinds of positioning scheme-normal flow (normal flows), floating (floats) and absolute positioning (absolute positioning), the following three layouts are briefly described.

Regular stream (normal flow)

In a normal stream, the elements are laid out in the first place in the HTML, in this process, the inline elements are arranged horizontally until the row is filled and then wrapped, and the block-level element is rendered as a complete new row, unless otherwise specified, all elements are by default normal flow positioning, it can also be said that The position of an element in a normal stream is determined by the position of the element in the HTML document.

Floating (floats)

In a floating layout, the elements appear first in the position of the normal stream, and then offset as far as possible to the left or right according to the direction of the float, and the effect is similar to the text wrapping in typography.

Absolute positioning (absolute positioning)

In an absolutely positioned layout, elements are detached from the normal stream, so absolutely positioned elements do not have an impact on their siblings (if you look at the children's shoes, this is different from the floating elements that affect the sibling element), and the exact position of the element is determined by the coordinates of the absolute location.

BFC is a normal stream, so it has no effect on sibling elements. A. What is BFC.

With the above foundation, you can formally introduce the BFC. From a style perspective, elements with BFC are no different from ordinary containers, functionally, however, elements with BFC can be viewed as isolated containers in which the elements inside the container do not affect the outside element on the layout, and BFC have features that are not in common containers, such as floating elements, The second class that clears the floating method, such as the overflow method, triggers the BFC of the parent element of the floating element so that it can contain floating elements to prevent a problem of high collapse.

In simple terms, BFC is an attribute that affects the positioning of elements and the interaction of their sibling elements. two. How to trigger BFC

The above describes the definition of BFC, so how to trigger BFC.

elements that satisfy any of the following conditions are triggered as BFC: floating elements, float, and absolutely positioned elements other than none, Position (absolute,fixed) display is one of the following values Inline-blocks, Table-cells,table-captions overflow value other than visible (Hidden,auto,scroll)

However, "display:table" itself does not produce BFC, but it generates an anonymous box, and the box containing "Display:table-cell" in the anonymous box produces BFC. In short, for "display:table" elements, the BFC is generated by anonymous boxes instead of "display:table".

In CSS3, BFC is called flow Root and adds some trigger conditions: Display's table-caption value position fixed value, in fact, the fixed is a subclass of absolute, so in CSS2.1 Using this value also triggers the BFC, which is only more explicit in CSS3.

It is noteworthy that in the previous Kayo it has been stated that BFC is not an element, but some attributes of some elements, so that the above elements produce BFC, and they are not BFC in themselves, and this concept needs to be clearly differentiated. three. Characteristics of BFC

Overall, the BFC is a segregated container, which can be expressed in three characteristics: 1. BFC will prevent the outer margin from collapsing

The two contiguous div is superimposed on the vertical outer margin, some books will list this situation as a bug, and here Kayo does not agree that this folding, although it will give developers unfamiliar with CSS layout some inconvenience, but in fact it has a complete and specific folding rules, and in the mainstream browser, so Kayo more that this should be a feature of CSS. Of course, in actual development, perhaps we do not need this kind of folding sometimes, at this time we can take advantage of one of the characteristics of BFC--prevent the outer margin overlay.

Before giving an example of how BFC prevents the outer margin from collapsing, first explain the rules for margin folding: The outer margin of the vertical orientation is superimposed only when two block-level elements are adjacent and the context is formatted at the same block level. That is, even if two block-level elements are adjacent, their margins do not collapse when they do not format the context at the same block level. Therefore, stopping the outer margin folding requires only a new BFC to be generated.

Effect as shown:

You can also see the Demo.

As in the example above, the three div each contains a P element, and the three Div and its containing p elements have the top and bottom margins, but only the third Div has a margin that is not folded with the outer margin of its child element p. This is because the third Div creates a new BFC, thus creating a BFC element that does not have an outside collapse with its child elements (or the outer margin of the sibling element). 2. BFC can contain floating elements

This is also the principle of using the Overflow:hidden and Overflow:auto methods to close the float, using Overflow:hidden or Overflow:auto to trigger the BFC characteristics of the parent element of the floating element, so that it can contain floating elements, closing the floating 。

The original version of the consortium is "' Auto ' heights for blocks formatting context roots", which means that BFC automatically adapts to the height of the child element, even though it includes floating elements in its child elements.

Effect as shown:

You can also see the Demo.

In the example above, there are two div, they each contain a floating p element, but the first Div has a "height collapse" because the internal floating element is detached from the normal stream, so the div is equivalent to an empty label, with no height and width, that is, height 0, and the top and bottom borders overlap. The second Div, which uses overflow:hidden to trigger the BFC, can contain floating elements so that the height is displayed correctly and the border position is normal. 3. BFC can prevent elements from being overwritten by floating elements

As mentioned above, the block-level sibling element of a floating element ignores the position of the floating element, and as much as possible fills a whole line, which is overwritten by the floating element, which can be prevented by triggering BFC for that sibling element.

Effect as shown:

You can also see the Demo.

As the example above, the blue-background div uses Overflow:hidden to trigger the BFC, which is not covered by its sibling floating element, but is next to it. It is worth noting that the above situation is simply the sum of the element width and not exceeding the width of the parent element. Assuming that the width of the floating element and its non floating sibling elements do not exceed the width of the parent element, but when the width of the two elements is more than the width of the parent element, the non floating element drops to the next line, below the floating element , the effect of the following figure:

You can also see the Demo. four. BFC and Haslayout

Careful child shoes will find that in the above example, in addition to the use of Overflow:hidden trigger BFC, but also the use of a *zomm:1 attribute, this is iehack, because IE6-7 does not support the BFC of the consortium, but the use of private properties Haslayout 。 From the performance, Haslayout and BFC very similar, but Haslayout itself has a lot of problems, resulting in a series of ie6-7 bugs. Trigger haslayout conditions and trigger BFC some similar, specific situation Kayo will write another article introduction. Here Kayo recommended for the element set IE-specific CSS properties Zoom:1 trigger Haslayout, zoom for setting or retrieving elements of the scaling ratio, the value of "1" that is the actual size of the element, using Zoom:1 can trigger both haslayout and not the elements to other influences, which are relatively more convenient.

At this point we need to pay attention to a problem: since Haslayout has a similar function with BFC, then in the actual development, it is necessary to trigger the BFC elements to trigger the haslayout, so that BFC and haslayout have some special properties in modern browsers and IE At the same time, avoid the performance of an element in different browsers because of BFC or haslayout differences. In fact, many puzzling problems in actual development are actually caused by this. Similarly, if an element does not trigger BFC, try to ensure that it does not trigger haslayou