当前位置：网站首页>On BFC (block formatting context)

On BFC (block formatting context)

2022-04-23 07:36:00 【flym_】

In our development, we often hear BFC The word , When you want me to say BFC What is it? , But it can't explain well , understand . Anyway, there is no clear understanding , I have read the relevant materials carefully in the past two days to deepen my understanding of BFC understand .（BFC yes Web The layout of the box model in the page CSS Rendering mode , It refers to an independent rendering area or an isolated independent container . ）

What is? BFC

BFC: Block formatting context （Block Formatting Context,BFC） yes Web Visualization of the page CSS Part of the rendering , It's the area where the layout process of the box takes place , It's also the area where floating elements interact with other elements .

1 BFC It is an independent layout environment , The layout of the elements is not affected by the outside world .

2. If an element matches the trigger BFC Conditions , be BFC The layout of elements in is not externally affected .

3. Floating doesn't affect anything else BFC The layout of the elements in , And clear float can only clear the same BFC The float of the element in front of it .

4. The block formatting context contains everything inside the element that created it .

5. In a BFC in , Block box and row box （ A row box consists of all the inline elements in a row ） Will be arranged vertically along the border of its parent element .

How to form BFC

Floating elements float The value of the none.
Absolute positioning elements （ Elemental position by absolute or fixed）
overflow Values are not for visible The block element of
display The value is flow-root The elements of
display The value of is table-cell, table-caption, inline-block Any one of them .
position The value of the relative and static.

BFC application

Prevent font wrapping
Adaptive two （ many ） Column layout
Clear internal float
prevent margin overlap

Understand in actual code BFC

1. Make the floating content equal to the surrounding content

In the actual development, we will encounter that the floating element exceeds the height of the parent element .

<style>
.outer {
  border: 5px dotted rgb(214,129,137);
  width: 450px;
}
.aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        /* height: 200px; */
        background: #fcc;
    }
</style>
<body>
  <div class="outer">
    <div class="aside"></div>
    <div class="main">I am a floated element.</div>
  </div>
</body>

1575904227(1).jpg

Create one that will contain this float BFC, The usual practice is to set the parent element overflow: auto Or set other non default overflow: visible Value .

.outer {
  border: 5px dotted rgb(214,129,137);
  width: 450px;
  overflow: hidden;
}

1575904393(1).jpg

2. Don't overlap with floating elements

If a floating element is followed by a non floating element , Then there will be a phenomenon of coverage , Many adaptive two column layouts do this . For example, the effect in the figure below , For example

<style>
.outer {
  border: 5px dotted rgb(214,129,137);
  width: 450px;
  position:  relative;
}
.aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
  <div class="outer">
    <div class="aside"></div>
    <div class="main">I am a floated element.</div>
  </div>
</body>

1575904599(1).png
Because of two box All in the same BFC in , It's all about BFC The boundary is the starting point , If two box They all have BFC Words , The layout will be arranged one by one in order , We can trigger main Generate BFC.

    .main {
        height: 200px;
        background: #fcc;
        overflow: hidden;
    }

1575904889(1).jpg

版权声明
本文为[flym_]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230617476558.html