BFC and IFC
- Formatting context yes W3C CSS2.1 A concept in the specification . It's a rendered area of the page , And there's a set of rendering rules , It determines how its child elements will be positioned , And the relationship and interaction with other elements . The most common Formatting context Yes Block fomatting context ( abbreviation BFC) and Inline formatting context ( abbreviation IFC).
- BFC namely Block Formatting Contexts ( Block level formatting context ）
- have BFC The element of a property can be thought of as an isolated container , The elements inside the container will not affect the elements outside in layout .
- also BFC It has some features that ordinary containers don't have .
BFC Layout rules
Inside Box Will be in the vertical direction , Place one by one .
Box The distance in the vertical direction is determined by margin decision . Belong to The same BFC Two adjacent Box Of margin There will be a merger .
Each box （ Block box and row box ） Of margin box Left side , And inclusion block border box Contact on the left side of ( For left to right formatting , Otherwise, vice versa ). Even if there is a float .
BFC The area of float box overlap .
BFC It's a separate container on the page , The child elements inside the container do not affect the elements outside . And vice versa .
Calculation BFC Altitude time , Floating elements are also involved in the calculation .
- body Root element
- Floating elements ：float except none Value beyond
- Absolute positioning elements ：position (absolute、fixed)
- display by inline-block、table-cells、flex、table-caption perhaps inline-flex
- overflow except visible Value beyond (hidden、auto、scroll)
BFC Characteristics and Application
1. In the same BFC The outer margins of the adjacent boxes below will merge
To avoid outer margin merging, you can put it in different BFC In the container
2. BFC Can contain floating elements （ Remove the floating ）
- When the parent does not set the height , Floating child elements can cause high collapse , Set... At the parent of the floating element overflow: hidden Trigger the container's BFC, You can wrap floating elements .
3. BFC Can prevent elements from being overwritten by floating elements （ Adaptive two column layout ）
- Two elements of the same level , When one of them floats , It's going to cover a part of another element , But text information is not covered by floating elements .
- You can add... To the covered elements overflow: hidden, The floating element does not cover the other element , Adaptive two column layout can be realized in this way , The floating element on the left has a fixed width , Right trigger BFC No width is set for the element of , Make its content adaptive width
- IFC（inline formatting context）： Inline formatting context .·
IFC Layout rules
- The boxes are placed horizontally one by one , When the container is not wide enough, it will wrap
- In the horizontal direction , The outer margin of these boxes 、 Frame 、 The space occupied by the inner margin will be calculated , But the inside box is vertical border,padding And margin Will not open the height of the box
- In the vertical direction , These boxes may be aligned in different forms , It can be done by vertical-align To set up , The default alignment is baseline
- Each row generates a row box （line box）, Including all the boxes in the line , The width of the row box is determined by the containing block and the existing float
- Generally, the left and right sides of the row box are close to its containing blocks , But because of the floating box （float Elements ） Change with the existence of . The floating box will be between the edge of the containing block and the edge of the row box , In this way, the available width of the row box is less than the width of the containing block .
- When the total width of all boxes is less than the width of row boxes , So the horizontal layout in the row box is made up of text-align Attribute to determine
- When the total width of all boxes exceeds one row box , It will form multiple line boxes , Multiple row boxes cannot be separated vertically from each other , It can't overlap
- When an inner row box exceeds the width of the inner row box , It will be split into boxes , These boxes are distributed in multiple row boxes . If an in line box cannot be split （ For example, only a single character , or word-breaking The mechanism is disabled , Or the inner box of the line is affected by white-space The property value is nowrap or pre Influence ）, Then the inner row box will overflow the inner row box
- When an in line box is split , At the division margins, borders and padding There won't be any visual effects （ Or any other split , As long as there are multiple line boxes ）
- The height of the row box is calculated by the element with the highest actual height among the internal elements . The height of each row box is different due to the content , So the height may be different
- In a row box , When the height of the inner container it contains is less than the height of the row box , The vertical position of the inner container can be determined by its own vertical-align Attribute to determine
Be careful ： stay IFC In the environment of , There can be no block level elements , If you insert a block level element into IFC in , Then this IFC Will be destroyed into BFC, The element or text before the block level element and the element or text after the block level element will each automatically generate an anonymous block box surrounded by .