CSS BFC and IFC

BFC

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

The specification defines: floating elements and absolute positioning elements, block-level containers (inline-blocks,table-cells,table-captions) of non-block-level boxes, and block-level boxes with overflow values not visiable. Will create a new BFC for their content.

Related definitions:

Block-level boxes (block-level box)------A BLOCK-LEVEL element block level (' Display ' attribute value ' block ', ' list-item ' or ' table ') generates a Block-leve L box, such a box will participate in the block-formatting context (a way of layout)

Block-formatting context (BFC)------In this layout, the box is located at the top of the containing block, one by one vertical arrangement, the horizontal direction full width.

Containing block (containing block)------box itself establishes containing block for its descendants, which is used to calculate the position and size of the inner box.

Which elements will trigger BFC:

1. root element;

The 2.float attribute is not none;

3.position for absolute or fixed

4.display:inline-block,table-cell,table-caption,flex

5.overflow is not visible

BFC Layout Guidelines:

1. The inner box is vertically oriented and vertically placed

2. It does not overlap with float (floating element)

3. Its vertical direction is determined by margin, and the margin of the element under the same BFC layout overlaps

4. Under its layout, the content of the child element, regardless of how it changes, will not affect its external elements

5. Its height will also count the height of float float element

6. The left side of the element will be contacted with the left side of the box it contains, as is the case with floats.

Use of BFC:

1. Because it does not overlap with floating elements, it plays a very good role in the adaptive two-column layout.

2. Can clear the internal floating

3. can go to margin overlap, because the different BFC layout of the element margin does not overlap

Sample Analysis:

Adaptive two-column layout

 <Div>          <imgclass= "Leftbox"src=".. /images/none_new.png ">          <Divclass= "Rightbox">             <H3>Developers</H3>             <span>Sdfsdfsdfsdfs Scholar-Bureaucrat Satan law</span>          </Div>     </Div>

The left side of the picture floats, the right content can be set BFC layout, and floating elements will not overlap.

Two-column adaptive layouts that are widely circulated:

. Rightbox {overflow: hidden; *display:inline-block;} The disadvantage is that hidden may hide the overflow section . rightbox{display: table-cell;  Width:2000px; *display: inline-block; *width: Auto}

Ifc

IFC (inline formatting contex)------Inline formatting context

Specification definition: Starting from the top of the parent element, the box is arranged one after the other, and the transverse margin/border/padding is valid in these boxes. The boxes may be vertically aligned in different ways (bottom, top, Text baseline alignment).

Related definitions:

Line box (box model)-----A row box model is generated by multiple inline elements in each row based on a block container. When the inline box is wider than the line box, the inline box is broken down into several boxes and then distributed inside several line box, and if the inline box cannot be decomposed (for example, a word or white-space:nowrap), it will exceed Line-box.

CSS that affects the layout:

1.font-size

2.line-height

3.height

4.vertical-align

CSS BFC and IFC