1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>BFC - 塊級格式化上下文</title>
5 <!--
6 BFC的布局規(guī)則:
7 1. 內部的Box會在垂直方向，一個接一個地放置。
8 2. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
9 3. 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
10 4. BFC的區(qū)域不會與float box重疊。 (因為 float 也是一個BFC，兩個BFC不會重疊，這個可以用來做左右布局)
11 5. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
12 6. 計算BFC的高度時，浮動元素也參與計算。
13
14 如何創(chuàng)建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元素大，則下一個元素的文字會環(huán)繞該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
|
