CSS block formatting context

CSS block formatting context

1. overview

Block formatting context (BFC) is a part of visual CSS rendering of Web page. It is the area where the layout process of block box occurs, and the area where floating elements interact with other elements.

An independent BFC will contain all internal child elements, and will not affect the layout and interaction of other elements.

Based on the sub elements in the same BFC, the outer margin between the two sub elements will be folded up and down. One way to avoid this situation is to set one of the sub elements to BFC and then set the outer margin between the inner elements of the sub elements.

2. Properties that can be created as BFC:

1. Root element (< HTML >)
2. Floating element ({float: non none})
3. Absolute positioning element ({position: absolute|fixed})
4. Inline block element ({display: inline block})
5. Table cell ({display: table cell})
6. Table title ({display: table caption})
7. Anonymous table cell element
 8. Block element whose overflow value is not visible ({overflow: non visible})
9. The element whose display value is flow root (flow root can be understood as the context similar to html root element, no side effect, preferred) ({display: flow root})
10. The element with the value of contain as layout, content or paint ({contain: layout|content|paint})
11. Elastic element ({display: flex| inline flex})
12. Grid element ({display: grid| inline grid})
13. Multi row containers (not verified, use with caution)

3. example

3.1 the parent contains floating elements, so there is no problem of passing through the bottom of the parent

css code

* {
  margin: 0;
  padding: 0;
}
.container {
  border: 5px solid red;
  /* float: left; */
  /* position: absolute; */
  /* position: fixed; */
  /* display: inline-block; */
  /* display: table-cell; */
  /* display: table-caption; table Everything related is OK */
  /* overflow: hidden; Non visible */
  /* display: flow-root; Stream root (similar to html root element context) */
  /* contain: layout; layout|content|paint Fine */
  /* display: flex; */
  /* display: inline-flex; */
  /* display: grid; */
  /* display: inline-grid; */
  display: flow-root;  /* No side effects, preferred */
}
.float {
  float: left;
  background-color: cornflowerblue;
  color: black;
  font-size: 20px;
  height: 200px;
}
.normal {
  background-color: blueviolet;
}

html code

<!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>block formatting context </title>
</head>

<body>
    
    <div class="container">
        <div class="float">This is a floating element</div>
        <p class="normal">This is a right normal text.</p>
    </div>

</body>

</html>

3.2 outer margin folding

css code

* {
  margin: 0;
  padding: 0;
}
.a {
  margin-bottom: 20px;
  background: lightcoral;
}
.b {
  margin-top: 20px;
  background: khaki;
}
.b-box {
  display: flow-root;
}

html code

	<!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>block formatting context </title>
</head>

<body>
    
    <div class="a">element A</div>
    <div class="b-box">
        <div class="b">element B</div>
    </div>

</body>

</html>
Published 62 original articles · praised 0 · visited 2122
Private letter follow

Tags: IE

Posted on Wed, 05 Feb 2020 22:27:11 -0500 by nickman013