BFC

Posted 2021-02-20 l-c-blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BFC相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>BFC - 块级格式化上下文</title>
 5     <!-- 
 6         BFC的布局规则: 
 7         1. 内部的Box会在垂直方向，一个接一个地放置。
 8         2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
 9         3. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
10         4. BFC的区域不会与float box重叠。 (因为 float 也是一个BFC，两个BFC不会重叠，这个可以用来做左右布局)
11         5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
12         6. 计算BFC的高度时，浮动元素也参与计算。
13 
14         如何创建BFC:
15         1. float的值不是none。
16         2. position的值不是static或者relative。
17         3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
18         4. overflow的值不是visible
19      -->
20 </head>
21 <body>
22 
23     <!-- <style type="text/css">
24         * {
25             margin: 0;
26             padding: 0;
27         }
28         p {
29             color: #f55;
30             background: yellow;
31             width: 200px;
32             line-height: 100px;
33             text-align: center;
34             margin: 30px;
35         }
36         div {
37             color: #f55;
38             background: yellow;
39             width: 200px;
40             margin: 30px;
41             overflow: hidden;
42             height: 40px;
43         }
44     </style> -->
45     <!--  
46         第一个p跟第二个p属于不同的BFC，第一个p属于body,第二个p属于div
47         但是第一个p 跟 div 都是属于 body这个 BFC。所有 p > margin 跟 div > margin 重叠
48     -->
49   <!-- <div><p>看看我的 margin是多少</p></div>
50   <div>
51       <p>看看我的 margin是多少</p>
52   </div> -->
53 
54   <style type="text/css">
55         .div1 {
56             width: 200px;
57             height: 40px;
58             background-color: yellow;
59         }
60         .div2 {
61             width: 200px;
62             height: 60px;
63             background-color: blue;
64             float: left;
65         }
66         .div3 {
67             width: 50px;
68             height: 40px;
69             background-color: red;
70             float: left;
71             /*
72                 clear: none | left | right | both  
73                 清除浮动，默认none。
74                 left 说明该元素左边有浮动元素时，该元素下沉到float:xxx 值对应的那一侧元素下面。
75                 right 说明该元素右边有浮动元素时，该元素下沉到float:xxx 值对应的那一侧元素下面。
76                 both 说明该元素两边有浮动元素时，该元素下沉到float:xxx 值对应的那一侧元素下面。
77                 以上三个属性值都是只针对自身元素。不会移动相邻元素位置
78 
79                 相对于float元素，如果下一个元素宽度比该float元素大，则下一个元素的文字会环绕该float元素
80             */
81         }
82         .div4 {
83             width: 400px;
84             height: 80px;
85             background-color: green;
86             /*overflow: hidden;  加多这个属性，那么与div3 时属于两个不同的BFC，所以两个不会重叠。可以用来做左右布局*/
87         }
88   </style>
89 
90   <div class="div1"></div>
91   <div class="div2"></div>
92   <div class="div3"></div>
93   <div class="div4">11111</div>
94 </body>
95 </html>

以上是关于BFC的主要内容，如果未能解决你的问题，请参考以下文章

前端面试 CSS— BFC的渲染规则有哪些？有哪些应用场景？