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>
来源：https://www./content-4-689401.html
|
