BFC is a common point in the front-end interview, the following introduction to what is BFC, what is used
What is BFC?
Block Formatting Context (BFC).
Is a concept in the W3C CSS 2.1 specification that determines how an element positions its content and how it relates and interacts with other elements. When it comes to visual layout, Block Formatting Context provides an environment in which HTML elements are laid out according to certain rules. Elements in one environment do not affect the layout of other environments. For example, a floating element forms a BFC. The children of the floating element are mainly affected by the floating element. The two floating elements are not affected by each other. It’s kind of like a BFC is an independent administrative unit. You can also say that the BFC is a scope. It can be thought of as a separate container, and the layout of the box inside the container has nothing to do with the layout of the box outside the container.
Another popular explanation is that boxes in normal flow belong to a formatting context, which can be block or inline, but not both. Also, Block boxes are formatted in Block formatting context, Inline boxes are formatted in an Inline formatting context. Any element that is rendered belongs to a box and is either block or inline. Even text that is not wrapped in any element can be either anonymous block boxes or inline boxes, depending on the case. Therefore, the above description is to classify all elements into corresponding formatting context.
I have sorted out the following general performance rules:
1. In the element that created the Block Formatting Context, its children are placed one by one according to the document flow. Vertically they start at the top of a contained block, and the vertical distance between two adjacent elements depends on the ‘margin’ property.
According to section 1 of CSS 2.1 8.3.1 Collapsing on vertical margins, block boxes from two adjacent normal streams will collapse. That is, the margins of two vertical Windows in the same BFC will overlap.
According to Section 3 of CSS 2.1 8.3.1 Collapsing to margins, elements that generate block Formatting context do not fold margins with children in the stream. So the solution to this problem is to add a wrap container with BFC for both containers.
In Block Formatting Context, the left edge of each element is in contact with the left side of the containing Block (in the case of right-to-left Formatting, the right edge is in contact with the right), even if there is floating (although the content area of an element is compressed due to floating). Unless the element also creates a new Block Formatting Context.
Block Formatting Context is a separate container on the page, in which children do not affect the layout of the outside elements, and vice versa.
Floats. As described in CSS 2.1 9.5 Floats, elements that create Block Formatting contexts cannot overlap with floating elements.
Border-boxes of tables, block-level replacement elements, or elements that have created a new block formatting context in a normal flow (such as elements whose ‘overflow’ feature is not ‘visible’) cannot be in the same block Floating elements in formatting context overlap.
5. When the container has enough free space to hold the width of the BFC, all browsers place the BFC in the free space of the float element’s row.
In IE6, IE7, IE8, Chrome Opera, when the width of the BFC is between the “remaining container width” and “container width”, the BFC will be displayed on the next line of the floating element. In Safari, the BFC remains displayed on the float element line and the BFC overflows the container; In Firefox, the container behaves like IE8(S) or Chrome when the container’s ‘padding-top’ or ‘border-top-width’ features are not 0, otherwise it behaves like Safari.
As it turns out, only Firefox displays on the same line in the latest version of the browser, and all other browsers wrap.
In IE6, IE8 Opera, when the BFC width is greater than the “container width”, the BFC is displayed on the next line of the floating element. In Chrome Safari, the BFC remains displayed in the float element line, and the BFC overflows the container; In Firefox, the container behaves like IE8(S) when the container itself creates a BFC or the container’s ‘padding-top’ and ‘border-top-width’ features are not both 0, otherwise it behaves like Chrome.
As it turns out, only Firefox displays on the same line in the latest version of the browser, and all other browsers wrap.
8. According to the height calculation rules in section 10.6.7 of CSS2.1, when calculating the height of elements that generate block formatting context, their floating children should be involved in the calculation.
If there is any other information, please reply to add, I will update in time!
Here’s a typical example:
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BFC</title>
<style>
*{
padding: 0;
margin: 0;
}
#red,#yellow,#orange,#green{
width: 100px;
height: 100px;
float: left;
}
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#orange{
background-color: orange;
}
#green{
background-color: green;
}
</style>
</head>
<body>
<div id="c1">
<div id="red"></div>
<div id="yellow"></div>
</div>
<div id="c2">
<div id="orange"></div>
<div id="green"></div> </div> <p>Hellow,everyone,Here is the text! </p> </body> </html>Copy the codeThe effect is as follows:
This code is intended to form a two-row, two-column layout, but since the #red, #yellow, #orange, and #green divs are in the same layout environment BFC, even though they are in two different divs (#c1 and #c2), they do not break lines. Instead, they are arranged in a row of four columns.
To make a two-row, two-column layout, you create two different layout environments, so to speak, two BFC’s. So how do you create a BFC?
Ii. How to generate BFC
Block Formatting Context can be generated when an HTML element meets any of the following criteria:
The value of float is not None.
The value of overflow is not visible.
The display value is either table-cell, table-caption, or inline-block.
The value of position cannot be relative or static.
If there are other ways, please give in the reply, I will update in time!!
In the example above, I add two more lines of code to create two BFC’s:
#c1,#c2{
overflow:hidden;
} Copy the codeThe effect is as follows:
Two layout environment BFC’s are created above. The left float of the inner child element does not affect the outer element. So #c1 and #c2 are unaffected by the float and still occupy each row!
What can BFC be used for?
A. Do not overlap floating elements
If a floating element is followed by a non-floating element, an overlay is created, as many adaptive two-column layouts do.
Apparently,. Aside overlaps with. Mian. Since both boxes are in the same BFC and start from the BFC boundary, if both boxes have BFC, they will be arranged one by one. Now. Main does not have BFC, and according to rule 2, internal elements will start from the left boundary. Unless it has a BFC, an element with a BFC cannot overlap with a floating element as per rule 4 above, so simply create another BFC for.mian to solve the overlapping problem. The method of creating a BFC has been described above. You can choose different methods depending on the situation. Here I choose overflow: Hidden.
.main{
overflow:hidden;
}Copy the codeEffect:
Due to the reason of IE, we need to add another zoom:1 to solve Haslayout. We will talk about Haslayout later.
B, clear element internal float
To clean up the float of child elements, simply set the parent element to BFC. The most common use is to set overflow: Hidden style on the parent element, and zoom :1 for IE6 (IE Haslayout).
Look at the following example:
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
height: 100px;
}
*{
padding: 10px;
margin: 0;
color: # 000;
text-decoration: none;
list-style: none;
font-family: Microsoft Yahei;
}
.outer{
width: 300px;
border: 1px solid # 666;
padding: 10px;
}
.innerLeft{
width: 100px;
height: 100px;
background: #f00;
float: left;
}
.innerRight{
width: 100px;
height: 100px;
background: # 090;
float:right;
}
</style>
</head>
<body>
<div class="outer">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</body>
</html>Copy the codeEffect:
According to the height calculation rules in section 10.6.3 of the CSS2.1 specification, floating child elements do not participate in the height calculation of block-level non-replacement elements in normal flows.
Meanwhile, according to the height calculation rules in section 10.6.7 of CSS2.1 specification, when calculating the height of elements that generate block formatting context, their floating children should be involved in the calculation.
So, the external container BFC is triggered and the height is recalculated. For example, adding the property Overflow: Hidden to outer triggers its BFC.
Effect:
C. Solve the overlap of two adjacent elements
Look at the following example:
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
height: 100%;
}
*{
padding: 0;
margin: 0;
color: #fff;
text-decoration: none;
list-style: none;
font-family: Microsoft Yahei;
}
.rowone{
background: #f00;
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.rowtwo{
background: # 090;
height: 100px;
margin-top: 20px;
position: relative;
}
</style>
</head>
<body>
<div class="rowone"></div>
<div class="rowtwo"></div>
</body>
</html>Copy the codeThe effect is as follows:
According to section 1 of CSS 2.1 8.3.1 Collapsing on vertical margins, block boxes from two adjacent normal streams will collapse. That is, the margins of two vertical Windows in the same BFC will overlap.
According to Section 3 of CSS 2.1 8.3.1 Collapsing to margins, elements that generate block Formatting context do not fold margins with children in the stream. So the solution to this problem is to add a wrap container with BFC for both containers.
So the solution to this problem is to put two containers in two packages according to the BFC container, IE is triggered layout in two packages!
The effect is shown below:
What is IE hasLayout
In the example above we used Zoom :1 of IE; It actually triggers IE layout. Layout is an internal part of the IE rendering engine. In Internet Explorer, an element either organizes and sizes its own content, or relies on inclusion blocks for sizing and organizing content. To reconcile these two approaches, the rendering engine uses the ‘hasLayout’ attribute, which can be true or false. When the ‘hasLayout’ property of an element is true, we say that the element has a layout, or has a layout. You can use the hasLayout property to determine if an element has a Layout,
Such as the object. CurrentStyle. HasLayout.
HasLayout has a lot in common with BFC, but the concept of hasLayout is easier to understand. Elements in Internet Explorer, use the “layout” concept to control the size and location, can be divided into two cases with the layout and no layout, with the layout of the elements which control the size and positioning of itself and its child elements, while no layout element through the parent element (recently with the layout of the ancestor element) to control the size and location, The browser is told whether an element has a layout by the hasLayout attribute, which is a Boolean variable: true means that the element has a layout, false means that the element has no layout. In short, hasLayout is just a property that is proprietary to Internet Explorer, and elements with hasLayout true are given a range of effects by the browser.
In particular, hasLayout has been abandoned in IE 8 and later versions, so in practice you only need to trigger hasLayout for certain elements in browsers below IE 8.
How to trigger layout
An element triggering hasLayout can affect the size and positioning of an element, which can consume more system resources. Therefore, IE designers default to triggering hasLayout for only a few elements. This is not the same as the BFC being triggered almost entirely by the developer with a specific CSS), which is as follows:
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>
In addition to elements that IE triggers hasLayout by default, Web developers can also trigger hasLayout for elements using specific CSS.
HasLayout can be triggered by setting any of the following CSS for an element (that is, setting the element’s hasLayout property to true).
Display: inline-block height: (except auto) width: (except auto)float: (left or right) position: Absolute writing-mode: tB-rl zoom: (except normal arbitrary value) min-height: (arbitrary value) min-width: Max-width: (visible) overflow: (visible) overflow-x: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) overflow: (visible) (Any value except visible, only for block-level elements) overflow-y: (Any value except visible, only for block-level elements) position: fixedCopy the codeFor inline elements (either the span element, which is considered inline by the browser by default, or the display element is set: Inline elements), width, and height only trigger hasLayout for elements in IE5. X and quirks mode in IE6 or later, but for IE6, if the browser is running in standards-compliant mode, Inline elements ignore width or height, so setting width or height does not cause the element to trigger hasLayout in this case. But Zoom always triggers hasLayout, except in IE 5.0. Zoom is used to set or retrieve the zoom of an element. Setting zoom: 1 to an element triggers hasLayout without causing unwanted effects on the element. Therefore, considering compatibility between browsers and the impact on elements, it is recommended to use Zoom: 1 to trigger hasLayout of elements.
Six, can solve the problem
HasLayout displays features similar to BFC, so it can be considered a BFC in IE. Almost all of the above rules are followed, so the above problems can be solved by triggering hasLayout in IE.
HasLayout also affects the size and positioning of elements as BFC does, but it is not a complete standard, and because it only fires on certain elements by default, this leads to a lot of front-end bugs in IE. Triggering hasLayout is more about addressing bugs in IE than it is about exploiting its “side effects” to achieve something. In addition, elements that trigger hasLayout will have similar effects to those that trigger BFC elements. Therefore, Kayo recommends that elements that trigger BFC should trigger hasLayout at the same time as elements that trigger BFC. It is also possible to achieve performance unity by firing only one of them, as illustrated below.
Here’s a list of the effects that trigger the hasLayout element:
A. Prevent margin folding
As in the above example:
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BFC6</title>
<style>
html,body{
height: 100%;
}
*{
padding: 0;
margin: 0;
color: #fff;
text-decoration: none;
list-style: none;
font-family: Microsoft Yahei;
}
.mg{
zoom: 1;
}
.rowone{
background: #f00;
height: 100px;
margin-bottom: 20px;
}
.rowtwo{
background: # 090;
height: 100px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="mg">
<div class="rowone"></div>
</div>
<div class="mg">
<div class="rowtwo"></div>
</div>
</body>
</html>Copy the codeNeed to trigger.mg layout to solve margin overlap problem (IE7 / IE6)
The running effect is as follows:
BFC above cited examples, in IE6/7 (and below) trigger layout can be solved, you can try it yourself, here will not repeat the example.