BFC layout rules

What is landing

Block Formatting Context is a separate rendering area, separating elements inside the BFC from those outside, so that the positioning of inner and outer elements does not affect each other.

Trigger condition of BFC

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

Floating and absolutely locatable elements, block-level containers that are not block-level boxes (” unavailable “blocks,” table-cells, “and table-captions), and block-level boxes that have a non-visiable overflow value, Both create new BFC (block-level format context) for their content.

– the W3C

That is, there are several methods to create BFC:

  • Floating elements,floatValues are not fornone
  • Absolute positioning elements,positionProperties forabsolute ，fixed
  • Block-level containers that are not block-level boxes (displayA value ofinline-blocks , table-cells , table-captionsEtc.)
  • overflowThe value of thevisible （ visiableIs the default value. Content will not be pruned and will appear outside the element box)
  • In addition, the root element, the HTML element itself, is the BFC (the largest BFC)

BFC layout rules

  • The inner boxes will be placed vertically, one by one;
  • The vertical distance of the box is given bymarginDetermines the top and bottom of two adjacent boxes belonging to the same BFCmarginThere’s overlap;
  • The left side of each element touches the left side of the containing box, even if there is a float;
  • BFC areas will not be associated withfloatOverlapping;
  • The BFC is a separate container on the page. The child elements inside the container do not affect the outside elements, and vice versa.
  • When calculating the height of the BFC, the floating element also participates in the calculation.

Landing the role of

Adaptive two-column layout

Prevents elements from being overwritten by floating elements and ADAPTS to a two-column layout

<! -- Fixed width on the left, adaptive width on the right -->
<div class="ldiv">Left floating elements</div>
<div class="rdiv">Float is not set, width is not set but the BFC element is triggered</div>
<style>
    .ldiv { 
        height: 100px;
        width: 100px;
        float: left;
        background: aqua; 
    }
    .rdiv { 
        height: 100px;
        background: blueviolet; 
        overflow: hidden; 
    }
</style>
Copy the code

Clear internal float

Fixed float element not taking height issue (float element not wrapped in parent container)

<div class="parent">
	<div class="child"></div>
</div>
<style>
    .parent { 
        border: 1px solid blueviolet; 
        overflow: hidden; 
    }
    .child { 
        width: 100px;
        height: 100px;
        background: aqua;
        float: left; 
    }
</style>
Copy the code

Resolve margin overlap

In order to prevent margin overlap, multiple boxes can be classified into different BFC

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

<style>
  .container {
      overflow: hidden;
  }
  p {
      width: 100px;
      height: 100px;
      background: aqua;
      margin: 10px;
  }
</style>
Copy the code

Prevents elements from being overwritten by floating elements

<div class="ldiv">Left floating elements</div>
<div class="rdiv">Float is not set, but the BFC element is triggered</div>
<style>
	.ldiv {
        height: 100px;
        width: 100px;
        float: left;
        background: aqua;
    }
	.rdiv {
        width: 300px; 
        height: 200px;
        background: blueviolet; 
        overflow: hidden;
    }
</style>
Copy the code

CSS Formatting Context

Formatting context is a concept in W3C CSS2.1. It is a rendered area of a page and has a set of rendered rules that determine how its children are positioned and how they relate to and interact with other elements.

In addition to the BFC (block-level formatting context) in the CSS, there are IFC, GFC, FFC, etc., which are collectively called the CSS formatting context, also known as the visual formatting model. The CSS visual formatting model is the mechanism used to process a document and display it on a visual medium.

Simply put, the CSS formatting context is used to control the location of the box, that is, the layout of the page.

IFC: In-line format context

Inline Formatting Context (IFC). It is mainly used for formatting rules of inline boxes.

The height of IFC’s line box is calculated from the actual height of the highest element in the line it contains (not affected by the vertical padding/margin).

The height of IFC’s row box is calculated based on the actual height of the highest element in the containing row. The CSS attributes include font-size, line-height, vertical-align, and text-align.

Inline elements are arranged horizontally from the top of the containing block. Margin, border, and padding are applied horizontally. Inline elements can be vertically aligned at the top, bottom, or baseline.

When several inline elements cannot be placed horizontally in a single row Box, they are assigned to two or more row boxes on the vertical stack (Vertically stacked Line Box), so a paragraph is the vertical stack of many row boxes. These row boxes are not separated vertically (unless otherwise specified), and they do not overlap.

So what does the IFC do in general?

  • Vertically, when the height of an element in a row is lower than that of the row box, thenvertical-alignProperty determines the vertical alignment.
  • Horizontally, when the total width of the elements in a row is smaller than that of the row box, the horizontal parts of the elements in a row are divided bytext-alignDecision.
  • In the horizontal direction, when the total width of the elements in a row exceeds the row box, the elements in the row will be allocated to multiple row boxes. If the properties such as non-collapsible row are set, the elements in the row will overflow the row box.
  • Both sides of the row box will touch the containing block, andEf = "https://github.com/sisterAn/blog" > float elements will be placed at middle position on the edge of the box and include fast.

GrideLayout Formatting Context (GrideLayout Formatting Context

Grid Formatting Context, commonly known as GFC. Similar to FFC, when the element’s display value is grid or inline-Grid, a Grid container is created. The completor creates a new formatting context for its content, the Grid formatting context. This is the same as creating a BFC, except that a grid layout is used instead of a block layout.

So what’s the use of the GFC, and how is it different from the table? The first is the same two-dimensional table, but GridLayout will have richer properties to control rows and rows, control alignment, and finer rendering semantics and control.

Flex Formatting Contexts (FFC) : Adaptive formatting context

The Flex Formatting Context is commonly known as FFC. When the display value is flex or inline-flex, a Flexbox container is created. The container creates a new formatting context for its contents, the Flex formatting context.

Unfortunately, this awesome feature is only supported by Google and Firefox, but it’s still good enough for mobile. At least Safari and Chrome are OK, which are the two most popular mobile apps.

Note, however, that Flexbox containers are not block containers (block-level boxes), and the following properties that apply to block layouts do not apply to Flexbox layouts:

  • Multiple columnscolumn-*Properties do not apply to Flexbox containers
  • float 和 clearProperties will have no effect on a Flex project and will not remove the Flex project from the document stream
  • vertical-alginProperties will not work on Flex projects
  • ::first-line 和 ::first-letterPseudo-elements do not apply to Flexbox containers, and Flexbox containers do not provide their ancestors with the first formatted line or first letter

reference

  • CSS status and how to learn
  • 10 minutes To understand the BFC
  • CSS status and how to learn

Three minutes a day, advance one