Common Positioning schemes

1. Normal flow 2. Floating 3

The BFC is part of the common flow of the above positioning scheme, which can be interpreted as a Block Formatting Context, which is an independent rendering area that is not affected by external influences and does not affect external elements

The rules

Boxes inside the BFC will be placed vertically, one after the other.

The vertical distance of the Box is determined by margin. The vertical margins of two adjacent boxes belonging to the same BFC will overlap.

The left side of the margin box of each element 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.

The region of the BFC does not overlap with the float box.

A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa. When calculating the height of the BFC, floating elements are also involved.

Trigger landing

Root element (HTML is the root element, the entire HTML is a single BFC)

Float property to none (such as: left | right)

Overflow value is not as visible (such as: hidden | auto | scroll)

The display attribute values for the inline – block | flex | inline – flex | table – cell | table – caption for absolute or fixed position

Contain contains layout, Content, paint elements

Multi-column containers (column-count or column-widtn is not auto, including column-count is 1)

BFC features and applications

1. Avoid overlapping margins

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
  }
</style>
<body>
  <div class="box"></div>
  <div class="box"></div>
</body>
Copy the code

The code above should theoretically be 200px between A and B, but in practice it is only 100px. The reason is that, according to the specification, the upper and lower margins of the block are merged into A single margin at the maximum size of A single margin. This is margin overlap

Resolve placing two divs in different BFC

Combined with overflow: hidden; Property triggers the BFC

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
  }
  .bfc{
    overflow: hidden;
  }
</style>
<body>
  <div class="bfc">
    <div class="box"></div>
  </div>
  <div class="bfc">
    <div class="box"></div>
  </div>
</body>
Copy the code

2. Clear floats

<style> .box{ width: 100px; height: 100px; background-color: black; margin: 100px; float: left; } .bfc{ border: 1px solid red; } </style> <body> <div class="bfc"> <div class="box"></div> </div> </body> ! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2846927de9304751a2722176438014d0~tplv-k3u1fbpfcp-zoom-1.image)Copy the code

The top code should theoretically look like a black box with a red border around it, but the red line is only 2px high because the floating element is separated from the document flow,

The workaround is to fire the BFC of the parent container via the Overflow property so that the parent container wraps the child container

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
    float: left;
  }
  .bfc{
    border: 1px solid red;
    overflow: hidden;
  }
</style>
<body>
  <div class="bfc">
    <div class="box"></div>
  </div>
</body>
Copy the code

3. Prevent elements from being overwritten by floating elements

<style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 100px;
    float: left;
  }
  .box2{
    width: 200px;
    height: 200px;
    background-color: black;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
Copy the code

Also use overflow

<style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 100px;
    float: left;
  }
  .box2{
    width: 200px;
    height: 200px;
    background-color: black;
    overflow: hidden;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
Copy the code

Welcome to pay attention to my public number: front-end technology war (attention, battle of battle yo)

If you can


My blog

I’m the nuggets

My Jane books

Laravel China