Preface:

In the front end of the foundation, CSS BFC is an important concept, but also a lot of large factories to investigate the front end of the foundation than asked a question, most of the time we are aware of this concept, but what is the specific role, please patiently read this article I believe there will be some harvest.

Let’s start with a few questions before we get started.

  • What is BFC?
  • What are the conditions that trigger the BFC
  • What can BFC do?
  • What scenarios require BFC

What is BFC?

Block Formatting Context (BFC)

In MDN, it is explained in detail that BFC is a part of visual CSS rendering in Web pages, an area that occurs during block box layout, and an area where floating elements interact with other elements.

Don’t you understand? The document is written fairly officially. But we can fully understand that the so-called BFC is a concept of CSS layout, is a region in other words can be understood as a black box. The layout of the internal elements of the BFC does not affect the external elements. Some conditions trigger the BFC to realize the requirements on the layout or solve some problems.

What are the conditions that trigger the BFC?

When it comes to triggering conditions, we have to say that the current document flow pattern is divided into three categories:

Normal flow

Normal flows are best understood as pages that are displayed from top to bottom and left to right, vertically in the context of block-level formatting, and horizontally in the context of inline formatting.

Floating flow

Left-floating elements as far as possible on the left, up, vice versa right float the same.

Positioning flow

Both absolute positioning and floating positioning leave the document flow, but do not affect the layout of the regular stream, nor do they occupy the document flow.

Trigger conditions:
  • The root element HTML
  • Float element (float of element is not None)
  • Absolute position element (element position is absolute or fixed)
  • Inline block element (element display is inline-block)
  • Overflow Computed values (Computed) are not visible block elements
  • The element whose display value is flow-root
  • 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)
  • .

Details: MDN Balla Balla big push. It’s better to remember the bold ones.

Function of trigger:

Margins of two adjacent containers belonging to the same BFC will overlap. And it’s going to take the most spaced value.(Tapping on the blackboard. Have you seen this in an interview?)

Code:

<! DOCTYPEhtml>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	.box{
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 10px;
    }
    .box1{
        width: 100px;
        height: 100px;
        background: blue;
        margin-top: 60px;
    }
    .box1-1{
        /*overflow: hidden; * /
        /*display:flow-root; * /
    }
</style>
<body>
	<div class="box"></div>
    <div class="box1">
        <div class="box1-1"></div>
    </div>
    <script>
    </script>
</body>
</html>
Copy the code

Reason: Both elements belong to the HTML root element, and BFC feature 1 states that "margins of two adjacent containers belonging to the same BFC overlap".

The float element is also used to calculate the height of the BFC

<! DOCTYPEhtml>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	.box {
		height: 200px;
		width: 200px;
		background: #ccc;
		float: left;
		margin: 10px

	}
	.box1 {
		height: 200px;
		width: 200px;
		background: #ccc;

	}

	.container {
		background-color: red
	}
</style>
<body>
	<div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <script>
    </script>
</body>
</html>

Copy the code

Cause: When the parent element does not set the height, the child element sets float not equal to None, which raises the BFC feature. See # 2, height collapse of the parent element.

The region of the BFC does not overlap with the floating container

Code:

<! DOCTYPEhtml>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	.box {
		height: 200px;
		width: 200px;
		background: #ccc;
		float: left;

	}
	.box1 {
		height: 200px;
		background: #f7aeae;

	}

	.container{}</style>
<body>
	<div class="container">
        <div class="box"></div>
        <div class="box1"></div>
    </div>
    <script>
    </script>
</body>
</html>
Copy the code

Cause: The left element floats out of the document flow.

Unified solution

You can take the flow-root property of MDN and give the parent element display: flow-root, the value of a new display property, which creates a BFC without side effects. Use display: flow-root in the parent block to create a new BFC. Of course, remember his compatibility

Of course, there are many other methods, such as overflow:hidden, display: inline-block to clear float effect, the implementation of the specific business needs to be discriminated

conclusion

BFC is a black box formatting context is a conceptual method in CSS layout, triggering BFC has many ways it can solve: margin overlap, floating height collapse, floating elements overlap and other problems, in daily development is essential.

Did you quit school?