What is BFC? How to apply it?

  • Block formatting context
  • A separate rendering area where the rendering of internal elements does not affect elements outside the boundary;
  • Common conditions for forming BFC: float is not None; Position is absolute or fixed; Overflow is not visible; Display is flex inline-block, etc.
  • Common applications: using BFC to avoid margin overlap, adaptive two-column layout, clear float.

Ii. BFC features and Application Examples:

2.1 Use BFC to avoid margin overlap

<! DOCTYPEhtml>
<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>Prevent margin overlap</title>
</head>
<style>
    div{
    	width: 100px;
    	height: 100px;
    	background: lightblue;
    	margin: 100px;
	}
</style>
<body>
    <div></div>
    <div></div>
</body>
</html>
Copy the code

In effect, 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.

First of all, this is not a CSS bug, we can understand it as a specification, if you want to avoid overlapping margins, you can put it in a different BFC container.

<! DOCTYPEhtml>
<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>Prevent margin overlap</title>
</head>
<style>
	.container {
    	overflow: hidden;
	}
	
	p {
    	width: 100px;
    	height: 100px;
    	background: lightblue;
    	margin: 100px;
	}
</style>
<body>
	<div class="container">
        <p></p>
	</div>
	<div class="container">
        <p></p>
	</div>
</body>
</html>
Copy the code

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

2.2 Adaptive two-column layout

According to:

  • The left side of the margin box of each box 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.
<! DOCTYPEhtml>
<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>
</head>
<style>
  .left {
    height: 100px;
    width: 100px;
    float: left;
    background: lightblue;
  }

  .right {
    height: 300px;
    background: #eee;
  }
</style>

<body>
  <div class="left">I'm a left floating element</div>
  <div class="right">I am a float with no setup and no trigger BFC element</div>
</body>
</html>
Copy the code

In this case, the second element is partially covered by the floating element (but the text is not covered by the floating element). If you want to avoid the element being covered, you can use the BFC feature of the second element and add overflow: hidden to the second element.

This approach works well for a two-column adaptive layout, where the width on the left is fixed and the content on the right is self-adaptive.

2.3 Clearing floats

When we do not set the height of the parent node and set the float of the child node, height collapse will occur. At this time, we need to clear the float.

Like this:

<! DOCTYPEhtml>
<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>Remove the floating</title>
</head>
<style>
    .parent {
    	border: 1px solid # 000;
    }
    
    .child {
    	width: 100px;
    	height: 100px;
    	background: #eee;
    	float: left;
    }
</style>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
Copy the code

Because the elements in the container float out of the document flow, the container is left with a margin height of 2px. If the BFC of the container is triggered, the container will be wrapped with floating elements.

<! DOCTYPEhtml>
<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>Remove the floating</title>
</head>
<style>
    .parent {
        border: 1px solid # 000;
        overflow: hidden
    }
    
    .child {
        width: 100px;
        height: 100px;
        background: #eee;
        float: left;
    }
</style>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
Copy the code

Extension 1: What are some common ways to clear floats?

  • Parent add overflow properties: auto, hidden, scroll;

  • Parent adds after pseudo-element;

    .clearfix::after {
	content: "";
	display: block;
	clear: both;
}
Copy the code

  • The parent adds a double pseudo-element

    .clearfix::before..clearfix::after {
	content: "";
	dispaly: table;
}

.clearfix::after {
	clear: both;
}
Copy the code

Extension 2:

It says two columns of adaptive layout, that is, left fixed, right adaptive layout. I have two ideas at present.
Idea 1: As above, add overflow: Hidden to the right element to form a BFC;
Float: left/right in the container, then set the container to the padding-left value, and then set the left/right value to the margin-left value.
<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>The left side is fixed and the right side is adaptive</title>
  <style>
    .left {
      width: 200px;
      height: 100px;
      background-color: pink;
      float: left;
      margin-left: -200px;
    }

    .right {
      width: 100%;
      height: 500px;
      background-color: skyblue;
    }

    .container {
      padding-left: 200px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">This is on the left side of the</div>
    <div class="right">This is the right</div>
  </div>
</body>

</html>
Copy the code