The box model

When a browser renders a page, the rendering engine treats the DOM as a box. The width, height and borders of these boxes are determined by CSS. A box model includes content, padding, border, and margin.

Box model is divided into standard box model and weird box model. In the standard box model, the width (width) and height (height) set by CSS only contain the content area, while in the weird box model (also called IE box model), the width and height of elements in addition to the content area also contain the inner margin and border. You can actively turn on the weird box model by setting box-sizing: border-box on a DOM element.

Visual formatting model

The CSS Visual Formatting Model is the calculation rules used to process and display documents on visual media. The model renders the box according to its boundaries. Usually the box creates a contain block that contains its children, but the children are not limited by the contain block. When the children run outside the contain block, they are called overflow.

Box generation is part of the CSS visual formatting model for generating boxes from document elements. Boxes have different types, depending on the display property.

  • Block box: display: block | list – item | table

    • A block-level element is formatted as a block, arranged vertically by default.
    • Each block-level box participates in the creation of a BFC.

  • Inline boxes, display: inline | inline – block | inline – table

    • Inline elements do not generate blocks of content, but can be displayed as multiple lines along with other inline level content.
    • Inline elements generate inline boxes that participate in the creation of the IFC.

  • Anonymous Boxes: CSS also creates boxes that cannot be selected by CSS selectors. We call these anonymous boxes.

    • The anonymous box inherits inheritable attributes from the parent element, leaving the default value initial for all other attributes.
    • Normally the CSS engine will automatically create an anonymous box for the text contained directly in the block box.
<div>
  Some inline text 
  <p>followed by a paragraph</p> 
  followed by more inline text.
</div>
Copy the code

This code produces two anonymous boxes, Some inline text and followed by more inline text.

Render document flow

Once the boxes have been identified, the CSS engine needs to complete the layout of the boxes, which are the smallest unit of layout. Here are three rules for arranging boxes.

These three rules are officially called the three positioning schemes, but to avoid confusion with position, we will call them rules.

Normal flow

In the context of block formatting for a normal stream, the boxes are arranged vertically. In the inline formatting context of a normal stream, the boxes are arranged horizontally. When the position property of the CSS is static or relative and float is None, the CSS layout is normal flow.

When position is relative, the box will also generate an offset of the specified size based on the values of top, bottom, left, and right attributes. Even if there is an offset, the box will still retain its original position, and other elements cannot occupy this position.

Floating flow

A box is a floating flow when its float is not None and its position is static or relative.

In a floating flow, the floating box floats to the beginning or end of the current row. This causes elements in the normal flow to “flow” to the edge of the float box (affected by the float), unless the element clears the previous float by clear.

If float is set to left, the floating box flows to the beginning of the current row box (left); If set to Right, the floating box flows to the end of the current row of boxes (right); Row boxes scale to fit the size of the float box, whether left or right.

positioning

An element is in position mode if its position is absolute or fixed.

In absolute positioning, the box is completely removed from the current stream, with no effect on other elements, and its position is calculated using top, bottom, left, and right relative to its most recently positioned containing block (or body if not). For fixed positioned elements, the containing block is the entire viewport, which is absolutely positioned relative to the viewport, so the element’s position does not change as it scrolls.

What’s the FC

All the previous concepts were intended to pave the way for the BFC, now it’s time to talk about the BFC.

BFC(Block Formatting Context) is a concept in the W3C specification. It determines an independent rendering area in a page and has a specified rendering mechanism. Determines how the boxes inside are arranged, and it has no effect on the elements outside. The most common formatting contexts are BFC, IFC, FFC, and GFC.

  • Block Formatting Context (BFC) Block Formatting Context
  • Inline Formatting Context (IFC) Inline Formatting Context
  • Flex Formatting Context (FFC) Flexibly Formatting Context
  • Grid Formatting Context (GFC)

BFC

A block-level Formatting Context (BFC) used to determine the layout of the children of a block-level box and an independent area in which floats interact. BFC affects only the direct children. This indirectly indicates that an element cannot exist in both BFC’s.

How to create a BFC layout:

  • The root element (<html>)
  • Overflow values are not visible block elements
  • Float element (float of element is not None)
  • Absolute position element (element position is absolute or fixed)
  • The element whose display value is flow-root
  • Anonymous table cell element
  • Table cell (element display is table-cell, HTML table cell default value)
  • Table title (display element as table-caption, HTML table title default to this value)

BFC features:

  • The block-level boxes inside the BFC are arranged vertically, one after the other. (Ordinary flow)
  • When calculating the height of the BFC, floating elements are also involved in the calculation.
  • Margin folding may occur for adjacent block-level elements under the same BFC. (Float avoids margin folding or breaking the structure of the same BFC)
  • A BFC element does not have margin folds with its children.
  • The floating box area does not overlap with the BFC.
  • The BFC is a separate container and the elements outside the BFC do not affect the elements inside the BFC and vice versa.

BFC application:

📚 When calculating the height of the BFC, floating elements are also involved in the calculation.

To child elements are set on the float: left | right after the parent element will collapse, experience tells us this time to the parent element set overflow: Hidden can solve this problem by making the parent element open. It is unknown how this works, but setting overflow for the parent element turns on a BFC, and one of the BFC’s features is that floating elements participate in height calculations, which eliminates this problem. Both overflow and position can solve this problem, but they will bring some side effects, for example, position will affect the existing positioning logic, overflow will appear scroll bar or remove the projection, in this case, you can use display: Flow-root to start a BFC is relatively side-effect free (note compatibility).

The height of the root < HTML > does not collapse when the child element floats, indicating that the root < HTML > is a BFC by default. The display: flow-root attribute creates a BFC container similar to the < HTML > root.

📚 Margin folding may occur for adjacent block-level elements under the same BFC

<div class="wrap">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.box1, .box2{
  width: 100%;
  height: 100px;
  background: red;
  /* float: left; */
}
.box1{
  margin-bottom: 30px;
}
.box2{
  margin-top: 30px;
}
Copy the code

The margin of the sibling element has collapsed so that the distance between box1 and box2 is 30px instead of 60px. Float box1 and box2 to solve this problem.

Another option is to wrap box2 with another div layer and set the BFC, since margin folding only happens for adjacent elements under the same BFC. Breaking box1 and Box2 under the same BFC also solves this problem.

<div class="wrap"> <div class="box1"></div> <div style="overflow: hidden;" > <div class="box2"></div> </div> </div>Copy the code

The 📚 BFC element does not have margin folds with its children

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{
  margin-top: 30px;
  /* display: flow-root; */
}
.box{
  height: 100px;
  background: pink;
  margin-top: 30px;  
}
Copy the code

The margin of the parent element has collapsed, in this case the box is 30px away from the top edge, not 60px. Because a BFC element does not have margin folds with its children, setting the wrap to overflow: hidden or display: flow-root solves this problem.

📚 The floating box area does not overlap with the BFC.

<div class="wrap">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.wrap{
  border: 10px pink solid;
}
.box1{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box2{
  width: 200px;
  height: 100px;
  background: blue;
  /* overflow: hidden; */
}
Copy the code

Because Box1 floats out of the normal document flow, it overlaps with Box2, because the area of the float box does not overlap with the BFC. We can solve this problem by setting Box2 to overflow: hidden or display: flow-root.

📚 Both sides fixed middle adaptive layout

<div class="wrap"> <div class="box1">left</div> <div class="box2">right</div> <div class="box3">main</div> </div> .wrap{  border: 10px pink solid; overflow: hidden; } .box1{ width: 100px; height: 100px; background: red; float: left; } .box2{ width: 200px; height: 100px; background: blue; float: right; } .box3{ height: 100px; background: green; overflow: hidden; }Copy the code

According to the feature “the area of the floating box does not overlap with the BFC”, the elements on both sides float and the elements in the middle turn on the BFC, which makes it easy to achieve the adaptive layout of the fixed middle on both sides.

Box1 and Box2 are stacked on top of Box3. When BFC is enabled for Box3, box3 occupies only the remaining space in the middle because “the area of the float box does not overlap with the BFC feature.”

IFC

How to create an IFC layout:

  • Inline block element (element display is inline-block)

The characteristics of the IFC

  • In the context of inline formatting, boxes are arranged horizontally one after the other, starting at the top of the containing block
  • Horizontal margin, border, and padding are preserved between boxes
  • Boxes can be aligned in different ways vertically

FFC

How to create an FFC layout:

  • Elastic elements (display as flex or inline-flex)

GFC

How to create a GFC layout:

  • Grid elements (display grid or inline-grid)



Remember to give it a thumbs up