编程知识 cdmana.com

Having studied CSS, do you know what BFC is?

Although you may not have heard of BFC What is it? , But you must have used , It is a kind of in CSS The technology that exists in , You may have never known there was such a term , This article will introduce exactly what is BFC

  • official account : Front end impression
  • There are book delivery activities from time to time , Remember to pay attention to ~
  • After attention, reply to the corresponding text to get :【 Interview questions 】、【 Front end must read e-books 】、【 Data structure and algorithm complete code 】、【 Front end technology exchange group 】

One 、 What is? BFC

First of all, let's quote WC3 Yes BFC Professional explanation of

BFC(Block Formatting Context): Translated into Chinese is called block level formatting context , It determines how elements position their content , And the relationship and interaction with other elements , When it comes to visual layout , It provides an environment , Elements are arranged according to certain rules in this environment

let me put it another way ,BFC Is to provide a separate container for the element , Arrange the container according to certain rules , Elements in this container do not affect external elements , Empathy , The external elements do not affect the internal elements

Two 、 How to trigger BFC

Let's find out what conditions can trigger BFC:

  1. float Not for none
  2. position by absolute or fixed
  3. overflow Not for visible
  4. display by inline-block or table or flow-root

In subsequent cases , Whenever you need to trigger BFC Of , Can be used according to these four conditions

3、 ... and 、BFC Related cases of

The official explanation is very difficult to understand , So let's use a few examples to learn more about BFC Use

(1) Remove the floating

Let's start with an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> float </title>
    <style>
        .parent{
    
    
            width: 350px;
            background-color: red;
        }
        .child{
    
    
            float: left;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child1 child">1</div>
        <div class="child2 child">2</div>
        <div class="child3 child">3</div>
        <div class="child4 child">4</div>
    </div>
</body>
</html>

The html The style of the document in the browser is shown in the following figure

 Insert picture description here
Obviously , This is an example of a child element floating and not opening up the parent element

The reason for this is simple , There are two things :

  1. The parent element is not set height
  2. The child element sets float float , Out of the document stream

The factor element is detached from the document flow , The parent element cannot count the size of the child element , So the child element can't pull the parent element apart , So we're going to clear the float

So how do we usually Remove the floating What about ? Perhaps the most common is to add styles to the parent element overflow: hidden 了 , In fact, this method triggers BFC, A separate environment is formed within the parent element , according to BFC The layout rules of , The elements in this container will be counted as , So the float is cleared

The effect of clearing floating is shown in the figure below

 Insert picture description here
In fact, through the trigger mentioned above BFC Can achieve the above effect , I don't want to show too much here

Now that we're talking about clearing floats , Let's take a look at the methods mentioned above , What else will be used ?

  1. Add an empty element after the last child element , And give patterns clear: both
  2. Set the height of the parent element

(2)margin-top Collapse

Another example is margin-top Collapse , Pictured

 Insert picture description here
The current child element is in the parent element box , And it's close to the top edge of the parent element , At this point, we want to make the upper edge of the child element away from the upper edge of the parent element , Achieve the effect shown in the figure below

 Insert picture description here
So the first thing we thought about was to add margin-top, But the result is not satisfactory , The effect is shown below
 Insert picture description here
The actual effect is , We've added... To the child elements margin-top, But it's the parent element as a whole that's distancing from the previous one , That's what we see margin-top Collapse The problem of


Obviously , The layout of child elements affects the layout of other elements , So we can trigger by adding a certain style to the parent element BFC, To form an independent environment within it , This will not affect the layout of other elements

Here's another supplement , in the light of margin-top Collapse , We can also set a parent element with a size not equal to 0 Border border, It also solves the problem

(3) In a vertical direction margin overlap

Let's start with a piece of code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin overlap </title>
    <style>
        .parent{
    
    
            width: 200px;
            height: 500px;
            background-color: red;
        }
        .child{
    
    
            width: 100px;
            height: 100px;
            margin: 0 auto;
            line-height: 100px;
            text-align: center;
        }
        .child1{
    
    
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .child2{
    
    
            margin-top: 50px;
            margin-bottom: 70px;
            background-color: lightcoral;
        }
        .child3{
    
    
            margin-top: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child child1">1</div>
        <div class="child child2">2</div>
        <div class="child child3">3</div>
    </div>
</body>
</html>

The effect is shown in the figure

 Insert picture description here
According to the code , Logically speaking, sub elements 1 With sub elements 2 There should be a gap between them 20 + 50 = 70px, But it's just 50px ; Empathy , Subelement 2 With sub elements 3 There should be a gap between them 70 + 50 = 120px, But it's just 70px

This is because in the vertical direction , If the two adjacent elements are set margin value , The layout is based on the larger value , That's typical Vertical margin overlap problem

If at this time in order to avoid margin overlap , We can add a parent element to the outside of each child element , And set the style for the parent element to trigger BFC, Then there will be no such problem

Specific code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin overlap </title>
    <style>
        .parent{
    
    
            width: 200px;
            height: 500px;
            background-color: red;
        }
        .child{
    
    
            width: 100px;
            height: 100px;
            margin: 0 auto;
            line-height: 100px;
            text-align: center;
        }
        .child1{
    
    
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .child2{
    
    
            margin-top: 50px;
            margin-bottom: 70px;
            background-color: lightcoral;
        }
        .child3{
    
    
            margin-top: 50px;
            background-color: lightgreen;
        }
        .third{
    
    
        	/* except overflow: hidden, You can also write :
				1. float: left
				2. float: right
				3. position: absolute
				4. ……
			*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="third">
            <div class="child child1">1</div>
        </div>
        <div class="third">
            <div class="child child2">2</div>
        </div>
        <div class="third">
            <div class="child child3">3</div>
        </div>
    </div>
</body>
</html>

The effect is shown below :

 Insert picture description here
Add : In this case , We put a parent on each child element , And it all triggers BFC, So as to avoid margin overlap , That is, we created multiple BFC To achieve this effect . But if in one BFC Environment , There are still multiple child elements , So the vertical direction of these sub elements is margin There will still be overlap

(4) Adaptive layout

Everyone has done it Text wrapping This effect , The implementation principle is very simple , Just one float Can be realized

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Text wrapping </title>
    <style>
        .parent{
    
    
            border: 1px solid #000;
            width: 200px;
            height: 250px;
        }
        .img{
    
    
            width: 100px;
            height: 100px;
            float: left;
        }
        .text{
    
    
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <img src="../../ Front end impression logo.jpg" alt="" class="img">
        <div class="text"> WeChat official account : Front end impression , Share front end technology every day 、 The front face is , There are more benefits to get , Welcome to your attention , Private message I add group , There are many big men in the group , Can exchange front-end technology with each other </div>
    </div>
</body>
</html>

The effect is shown below

 Insert picture description here

Logically speaking , Floating elements break away from the normal document flow , It should cover the contents of other elements , But why is the effect of text wrapping realized here ?

Actually css The original design of floating is to achieve the effect of text around the picture , Although the float will cover other elements , But it doesn't cover the text

At this point, in order to prevent floating elements from covering other elements , We can trigger other elements BFC Environmental Science , So you can add overflow: hidden style , The effect is shown below

 Insert picture description here
See here , I can't help but think of the very popular page layout in recent years , That's a two column layout , As shown in the figure below

 Insert picture description here
It's usually arranged like this , It's all left width fixed , The width on the right is adaptive

So we can achieve this layout by avoiding text wrapping around the diagram

The code is as follows :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Adaptive layout </title>
    <style>
        .parent{
    
    
            height: 100vh;
        }
        .left{
    
    
            width: 200px;
            height: 100%;
            background-color: lightgreen;
            text-align: center;
            float: left;
        }
        .right{
    
    
            height: 100%;
            overflow: hidden; /*  Trigger BFC, Not covered by floating elements  */
            text-align: center;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"> A fixed width </div>
        <div class="right"> Adaptive width </div>
    </div>
</body>
</html>

The effect is shown in the figure

 Insert picture description here

Four 、 Conclusion

The government is concerned about BFC Explanation , I feel a little hard to understand , So I don't include BFC List the layout rules in the environment , But in fact BFC The layout rules of the system can be roughly interpreted as the same as the normal layout rules , It's just that there are some special rules that I have highlighted in my case , I hope you can take a good look at each case , This should be good for BFC There is a general understanding of

Yours 【 Fabulous 】 、【 Collection 】 It's all my creative motivation , Thank you for your support

版权声明
本文为[osc_yo7hxxom]所创,转载请带上原文链接,感谢

Scroll to Top