Refresh BFC, IFC, GFC, FFC

Learn new things and consolidate the Foundation

Starting from FC

FC, Formatting context, formatting context, is a concept in W3C css2.1 specification, defines a rendering area in the page, and has a set of rendering rules, itDetermines how its child elements will be located., AndRelationship and interaction with other elements.

CommonFCInclude:BFC(Block formatting context | block-level formatting context) andIFC(Inline formatting context | in-row formatting context ).

Second, GFC (gridlayout formatting context | grid layout formatting context) and FFC (Flex formatting context | adaptive formatting context ).

Participants

A page consists of multiple boxes. The box in a normal stream is involved in a format context. This box may be a block box or a line box, but it cannot be a block box or a line box. The element type and display attribute determine the type of the box. Different types of boxes are involved in different formatting contexts. Block-level boxes are involved in block-level formatting contexts (BFC ), the Inline box participates in the row-level formatting context (IFC ).

BFC layout rules

1. The internal box is placed in the vertical direction one by one.
2. The vertical distance of the box is determined by margin. The margin of two adjacent boxes belonging to the same BFC overlaps.
3. The left outer edge (margin-left) of each element to be in contact with the left side of the contained block (for formatting from left to right, otherwise it is opposite ). This is true even if floating exists, unless this element forms a new BFC.
4. The BFC region does not overlap with the float box.
5. BFC is an isolated independent container on the page. The child elements in the container do not affect the external elements.
6. When calculating the BFC height, floating elements are also involved in calculation.

How to form (trigger )?

As long as the element meets any of the following conditions.

1. Body root element
2. Floating element: float is not a property value of none.
3. Positioning element: positin is absolute, fixed
4. Display: inline-block, table-cell, table-caption, flex, inline-flex
5. Overflow: Not visibility

BFC usage

1. Clear floating

<div class="wrap">    <section>1</section>    <section>2</section></div>

.wrap {    width: 250px;    border: 1px solid #000;}section {    float: left;    width: 100px;    height: 100px;    background-color: yellow;}

Effect:

Because the child elements are floating, the height of the parent element collapsed and cannot be automatically lifted based on the height of the child element.

Solution:.wrapAddoverflow:hidden;To form a BFC. Based on the 6th BFC rules, the height of the float element is calculated to clear the floating effect.

1. Adaptive two-column layout

<Div> <aside> </aside> <main> the city of the dark cloud is ready for destruction. The horns are full of autumn colors, and the night purple is seed by the swallow fat. </Main> </div>

div { width: 200px; background: #eee; }aside {  float: left;  width: 100px;  height: 50px;  background-color: aqua;}main {  background-color: magenta;}

Effect:

Because the left side is floating and the height of the outer box is not high, a part of the content on the right is below the left side of the element.

Solution:mainSetoverflow:hidden;To trigger the BFC of the main element. According to rules 4th and 5, the BFC region is independent and does not affect other elements on the page and does not overlap with the float element, therefore, two columns of Adaptive Layout can be formed.

1. Prevents vertical margin merge

<section class="s top">top</section><section class="s bottom">bottom</section>

section {  background-color: lime;  width: 100px;  height: 50px;}.top {  margin-bottom: 50px;}.bottom {  margin-top: 50px;}

Effect:

Code.topAnd.bottomThe margin of is a margin value of PX, but only 50 PX can be seen on the page. This is because their outer margins are merged.

Solution: Wrap an element outside of an element and set this outer Elementoverflow:hidden;To form a BFC. Because BFC is an independent internal container, it does not affect each other with the external, thus preventing the margin merger.

• Parent and Child margins overlap

<section class="box">  <article class="child"></article></section>

.box {  background: #f00;}.child{  height: 100px;  margin-top: 50px;  background: yellow}

Effect:

Code.childThere ismargin-top: 50px;But not displayed from the page. This is because the parent and child margins overlap.

Solution: Set the outer Elementoverflow:hidden;To form a BFC. Because BFC is an independent internal container, it does not affect each other with the external, thus preventing the margin merger.

Ifcifc layout rules

1. In IFC, boxes are arranged horizontally one by one, starting from the top of the box.
2. When placing these boxesmargin,border,paddingIt is valid to be retained between boxes. You can settext-alignThe attribute changes the horizontal alignment.
   In the vertical direction, these boxes may be aligned in different forms, their top or bottom alignment, or based on the baseline alignment of the text, you canvertical-alignSet the vertical alignment for the property.
3. Contains the outer area of the box. A row is formed, which is called a row box. The width of the row box is determined by the box containing the box and floating; the height of the row box is calculated by the highest actual height of the contained element (not affected by the vertical padding and margin ).
4. Block-level elements cannot exist in IFC. When block-level elements are inserted, suchInsert DIV in PTwo anonymous blocks are generated and separated by Div, that is, two IFC are generated. Each IFC is a block-level element and vertically arranged with Div.

IFC usage

1. P cannot insert Div

<p> p1 <div>div</div> p2 </p>

Effect:

1. Horizontal Center
   When a block needs to live horizontally in the row box, set itinline-blockThe IFC is generated in the outer layer, and then passedtext-align：center;To center horizontally.
2. Vertical center
   When a block needs to live vertically in a row box, set itsvertical-align:middle;Other row elements can be vertically centered under this parent element.

CSS that mainly affects the IFC layout:

1. Font-size
2. Line-height
3. Height
4. Vertical-align
5. Text-align

GFC

GFC, when set for an elementdisplay:grid;This element gets an independent rendering area. Then, set the layout.

GFC is a two-dimensional table, but gridlayout has more attributes to control the row and column, and control alignment and finer rendering semantics.

For details about grid layout, refer:

• CSS grid sequence (bottom)-complete grid layout Guide
• CSS grid sequence (bottom)-build the homepage of a website using grid layout

FFC

FFC, when set to an elementdisplay:flex, Ordisplay:inline-flexThe adaptive container (Flex container) is generated ).

For details about flex layout, refer:

• Flex layout Tutorial: syntax
• Flex layout Tutorial: Practice

References

• [Translation]: BFC and IFC
  • FORMATION AND CHARACTERISTICS OF BFC
  • IFC Concept
  • Example: Line-box
• Understanding BFC, IFC, GFC, FFC
  • What is FC?
  • How to Create BFC layout rules and Cases
  • IFC layout rules, Major CSS that affects IFC and Cases
• In css3, BFC, IFC, GFC, and FFC
  • What is FC?
  • BFC
  • IFC
  • GFC
  • FFC
• BFC and IFC concept understanding + layout rules + formation method + usage
  • Box
  • FC (formatting context)
  • IFC layout rules
  • BFC layout rules
  • How to form a BFC
  • BFC usage
    • Clear floating
    • Layout: Adaptive two-column layout
    • Prevents vertical margin merge

Refresh BFC, IFC, GFC, FFC