Having studied CSS, do you know what BFC is?

osc_yo7hxxom 2020-11-11 11:51:33
having studied css know bfc


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]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple