The definition of landing

Block formatting context (BFC).

It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements

FC

Formatting context is an area of a page that is rendered. It has a set of rules that determine how its children are positioned and how they relate to and function with other elements.

Common FCS are BFC, IFC (line-level formatting context), GFC (Grid layout formatting context), and FFC (adaptive formatting context)

Block-level box

The box is composed of margin, border, padding, and content. In fact, the four edges of each type define a box, namely content Box, padding Box, border box, and margin box. These four types of boxes always exist, even if they have a value of 0.

Margin-box determines the vertical spacing between a block box and its neighbor in the containing block.

The distance between boxes can also be controlled by using padding, but it still belongs to the inside of the Box. Besides, the border property cannot be used when using padding.

Three document flow positioning schemes (controlling the layout of elements)

Normal flow

In normal flow, elements are laid out up and down according to their sequential position in HTML

In other words, the position of an element in a normal stream is determined by its position in the HTML document

  • In a normal flow, boxes are arranged one after another;
  • In a block-level formatting context, they are arranged vertically; Block-level elements are rendered as a complete new line, and all elements default to normal stream positioning unless otherwise specified
  • In inline formatting context, they are arranged horizontally until the line is full and then wrapped
  • whenpositionforstaticorrelativeAnd,floatfornoneTriggers regular flow;
  • For static positioning (static positioning),position: static, the position of the box is the position of the conventional circulation bureau;
  • For relative positioning (relative positioning),position: relative, box offset position byTop, bottom, left, rightProperty definition.Retain the original position even if offsetOther regular streams cannot occupy this position.

Floating (float)

  • Left float elements as far as possible left, up, right float the same
  • This causes the normal flow to surround it unless the Clear property is set
  • Floating elements do not affect the layout of block-level elements
  • But floating elements doAffects inline elementsThe layout makes itSurround yourself, support the parent element, thus indirectly affecting the block – level element layout
  • The highest point does not exceed the highest point of the current row, the floating element that precedes it
  • Does not exceed its contain block, unless the element itself is already wider than the contain block
  • Inline elements appear to the right and left of left floating elements. Floating elements are not placed to the left and right of left floating elements

Float causes text to surround and inline elements to surround

<div style="border: 2px solid #ccc;">
    <div style="width: 100px; height: 100px; float: left; background: red;"></div>
    <span>The span will wrap around the red div</span>
    <span>The span will wrap around the red div</span>
    <span>The span will wrap around the red div</span>The text also wraps around the red div</div>
Copy the code

<div style="float: left; width: 100px; height: 100px; background: #000;">
</div>
<div style="height: 200px; background: #AAA;">
    <div style=" width: 30px; height: 30px; background: red;"></div>
    <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p>
</div>
Copy the code

Question: Why is the top left corner of div overwritten, but not the text? Shouldn’t float be on a different level from regular streams? Is it because the float property doesn’t work?

Float definition and usage:

The floating element generates a block-level box, regardless of what element it is

Float was originally designed to enclose text around a floating object.

Absolute Positioning

  • Absolute positioning scheme, the box is removed from the conventional flow, does not affect the layout of the conventional flow;
  • It is positioned relative to its containing block, associated with CSS properties:top,bottom,left,right;
  • If the attribute of the elementpositionforabsoluteorfixed, it is the absolute positioning element;
  • forposition: absolute, element positioning will be relative to the nearest of the superior elementsrelative,fixed,absolute, if not, relative tobody;

Trigger landing

  • [1] The root element, i.eHTMLThe element
  • [2] Floating element,floatThe value of thenone
  • [3]overflowThe value of thevisible(forhidden,auto,scroll)
  • [4]displayThe value ofinline-block,table-cell,table-caption; (Similar to float)
  • [5] Positioning elements,positionThe value ofabsoluteorfixed

Display: A table can also generate BFC because by default, the table generates an anonymous table-cell. This anonymous table-cell generates BFC

BFC layout rules:

  • 1. InternalBoxIt’s going to be placed vertically, one after the other. (Same as block level elements and inline elements in regular flow)
  • 2. InternalBoxThe vertical distance is divided bymarginDecision. Belong to the sameBFCTwo neighbors ofBoxthemarginThere will be overlap
  • 3. For each elementmargin boxTo the left of the containing block (parent block)border boxThe left side of the contact (for formatting from left to right, otherwise the opposite). This is true even if there is a float (this means that a BFC neutron element does not exceed its contain block, whereas an element with position as absolute can exceed its contain block boundary)
  • 4,BFCThe area will not be withfloat boxoverlap
  • 5,BFCIt is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa.
  • 6, calculationBFCWhen the float element is also involved in the calculation

The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
Copy the code

Because both div elements are in the same BFC container, the bottom margin of the first div overlaps the top margin of the second div, so the two boxes are only 100px apart, not 200px apart

This is not a CSS bug, it is a specification that can be placed in separate BFC containers if you want to avoid overlapping margins (see BFC function 4).

The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float

<div class="par">
    <div class="child"></div>
    <! Float these two child divs. The result of the float is that if the float is not cleared, the parent div will not wrap the following two divs, but they are still within the parent div's scope. -->
    <div class="child"></div>
</div>
Copy the code

Float left is when the left of the child div touches the left of the parent div’s borderbox, and float right is when the child div touches the right of the parent div’s Borderbox

The region of the BFC does not overlap with the float box

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<! Here is the CSS code -->.aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; overflow: hidden; // Trigger main box BFC background: # FCC; } .text{ width: 500px; }Copy the code

The above aside box has a float property that overlays the contents of the main box. The main box does not clear the float of the aside box. It only does one action, which is to trigger its own BFC, and then it’s not covered by the aside box anymore. So: the region of the BFC does not overlap the float box.

What does BFC do:

  • 1. Adaptive two-column layout
  • 2. Prevents elements from being overwritten by floating elements
  • 3. You can include float elementsClear internal float
  • 4, Belong to differentBFCWhen you canPrevent margin overlap
  • 5. Prevent line breaks in multi-column layouts due to browser rounding

Adaptive two-column layout

The area of the BFC does not overlap with the float box, so it ADAPTS to the width of the containing block (parent div), and the width of the aside.

<div class="aside"></div>
<div class="main"></div>
<! Here is the CSS code -->.aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; overflow: hidden; // Trigger main box BFC background: # FCC; }Copy the code

They belong to differentBFCWhen you canPrevent margin overlap

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
Copy the code
.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
Copy the code

At this point, the margins between the two boxes are 200px

Can include float elements – clear internal floats

Clear float principle: trigger the BFC attribute of the parent div so that the following child divs are in the same BFC region of the parent div

Prevents multiple column layout line breaks due to browser rounding

In some cases where a multi-column layout uses the width of the decimal point, resulting in a line break caused by the browser’s rounding, a BFC can be triggered in the last column to prevent line breaks. Take the special case of chestnuts below

<div class="container">
  <div class="column1">column 1</div>
  <div class="column2">column 2</div>
  <div class="column3">column 3</div>
</div>
<button>TOGGLE BLOCK FORMATTING CONTEXT</button>
Copy the code
.container {
  min-height: 200px;
}

.column1..column2 {
  width: 31.3%;
  background-color: green;
  float: left;
  min-height: 100px;
  margin: 0 1%;
}

.column3 {
  width: 31.3%;
  background-color: green;
  min-height: 100px;
  margin: 0 1%;
}

.bfc {
  overflow: hidden;
}


button {
  margin-top: 30px;
}
Copy the code
var btn = document.querySelector("button"),
  column3 = document.querySelector(".column3");
btn.addEventListener(
  "click".function() {
    column3.classList.toggle("bfc");
  },
  false
);
Copy the code

Landing and Layout

IE as a browser in the bizarre, of course, it is impossible to support the BFC standard step by step, so there is a Layout in IE this thing.

Layout and BFC are basically equivalent. In order to deal with the compatibility of IE, when BFC needs to be triggered, we need to use CSS attributes in trigger conditions to trigger BFC.

You also need to use Zoom: 1 for the Internet Explorer to trigger the Internet Explorer Layout.