1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>BFC - 塊級(jí)格式化上下文</title>
5 <!--
6 BFC的布局規(guī)則:
7 1. 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
8 2. Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
9 3. 每個(gè)盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
10 4. BFC的區(qū)域不會(huì)與float box重疊。 (因?yàn)?float 也是一個(gè)BFC，兩個(gè)BFC不會(huì)重疊，這個(gè)可以用來做左右布局)
11 5. BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
12 6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
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 第一個(gè)p跟第二個(gè)p屬于不同的BFC，第一個(gè)p屬于body,第二個(gè)p屬于div
47 但是第一個(gè)p 跟 div 都是屬于 body這個(gè) 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 清除浮動(dòng)，默認(rèn)none。
74 left 說明該元素左邊有浮動(dòng)元素時(shí)，該元素下沉到float:xxx 值對(duì)應(yīng)的那一側(cè)元素下面。
75 right 說明該元素右邊有浮動(dòng)元素時(shí)，該元素下沉到float:xxx 值對(duì)應(yīng)的那一側(cè)元素下面。
76 both 說明該元素兩邊有浮動(dòng)元素時(shí)，該元素下沉到float:xxx 值對(duì)應(yīng)的那一側(cè)元素下面。
77 以上三個(gè)屬性值都是只針對(duì)自身元素。不會(huì)移動(dòng)相鄰元素位置
78
79 相對(duì)于float元素，如果下一個(gè)元素寬度比該float元素大，則下一個(gè)元素的文字會(huì)環(huán)繞該float元素
80 */
81 }
82 .div4 {
83 width: 400px;
84 height: 80px;
85 background-color: green;
86 /*overflow: hidden; 加多這個(gè)屬性，那么與div3 時(shí)屬于兩個(gè)不同的BFC，所以兩個(gè)不會(huì)重疊。可以用來做左右布局*/
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
|
