-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
132 lines (123 loc) · 35.3 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[微风香水的前端大挪移]]></title>
<subtitle><![CDATA[没有勇气与智慧相伴的善良，无异于懦弱！]]></subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2016-01-18T02:33:30.046Z</updated>
<id>http://yoursite.com/</id>
<author>
<name><![CDATA[微风香水]]></name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title><![CDATA[CSS2 速查表 - BFC与边距重叠详解]]></title>
<link href="http://yoursite.com/2016/01/14/CSS2%20%E9%80%9F%E6%9F%A5%E8%A1%A8%20-%20BFC%E4%B8%8E%E8%BE%B9%E8%B7%9D%E9%87%8D%E5%8F%A0%E8%AF%A6%E8%A7%A3/"/>
<id>http://yoursite.com/2016/01/14/CSS2 速查表 - BFC与边距重叠详解/</id>
<published>2016-01-14T10:22:03.000Z</published>
<updated>2016-01-18T02:33:30.046Z</updated>
<content type="html"><![CDATA[<h1 id="u4EC0_u4E48_u662FBFC_uFF1F"><a href="#u4EC0_u4E48_u662FBFC_uFF1F" class="headerlink" title="什么是BFC？"></a>什么是BFC？</h1><p>在解释 <code>BFC</code> 是什么之前，需要先介绍 <code>Box</code>、<code>Formatting Context</code>的概念。</p>
<ul>
<li><h3 id="Box_uFF1A_CSS__u5E03_u5C40_u7684_u57FA_u672C_u5355_u4F4D"><a href="#Box_uFF1A_CSS__u5E03_u5C40_u7684_u57FA_u672C_u5355_u4F4D" class="headerlink" title="Box： CSS 布局的基本单位"></a>Box： <code>CSS</code> 布局的基本单位</h3><p><code>Box</code>是<code>CSS</code>布局的对象和基本单位， 直观点来说，就是一个页面是由很多个<code>Box</code>组成的。元素的类型和<code>display</code>属性，决定了这个<code>Box</code>的类型。 不同类型的 <code>Box</code>会参与不同的<code>Formatting Context</code>（一个决定如何渲染文档的容器），因此<code>Box</code>内的元素会以不同的方式渲染。让我们看看有哪些盒子：</p>
<a id="more"></a>
<h1 id="u4EC0_u4E48_u662FBFC_uFF1F-1"><a href="#u4EC0_u4E48_u662FBFC_uFF1F-1" class="headerlink" title="什么是BFC？"></a>什么是BFC？</h1><p>在解释 <code>BFC</code> 是什么之前，需要先介绍 <code>Box</code>、<code>Formatting Context</code>的概念。</p>
</li>
<li><h3 id="Box_uFF1A_CSS__u5E03_u5C40_u7684_u57FA_u672C_u5355_u4F4D-1"><a href="#Box_uFF1A_CSS__u5E03_u5C40_u7684_u57FA_u672C_u5355_u4F4D-1" class="headerlink" title="Box： CSS 布局的基本单位"></a>Box： <code>CSS</code> 布局的基本单位</h3><p><code>Box</code>是<code>CSS</code>布局的对象和基本单位， 直观点来说，就是一个页面是由很多个<code>Box</code>组成的。元素的类型和<code>display</code>属性，决定了这个<code>Box</code>的类型。 不同类型的 <code>Box</code>会参与不同的<code>Formatting Context</code>（一个决定如何渲染文档的容器），因此<code>Box</code>内的元素会以不同的方式渲染。让我们看看有哪些盒子：</p>
<blockquote>
<p><strong>block-level box</strong>：<code>display</code> 属性为 <code>block, list-item, table</code> 的元素，会生成 <code>block-level box</code>。并且参与 <code>block fomatting context</code>；</p>
<p><strong>inline-level box</strong>：<code>display</code> 属性为 <code>inline, inline-block, inline-table</code> 的元素，会生成 <code>inline-level box</code>。并且参与 <code>inline formatting context</code>；</p>
<p><strong>run-in box</strong>：<code>css3</code> 中才有， 这儿先不讲了。</p>
</blockquote>
<p> </p>
</li>
<li><h3 id="Formatting_context"><a href="#Formatting_context" class="headerlink" title="Formatting context"></a>Formatting context</h3><p><strong>Formatting context</strong> 是 <code>W3C CSS2.1</code> 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 <code>Formatting context</code> 有 <code>Block fomatting context</code> <strong>(简称BFC)</strong> 和 <code>Inline formatting context</code> <strong>(简称IFC)</strong>。</p>
<blockquote>
<p>CSS2.1 中只有 BFC 和 IFC<br>CSS3 中还增加了 GFC 和 FFC。</p>
</blockquote>
<p> </p>
</li>
<li><h3 id="BFC__u5B9A_u4E49"><a href="#BFC__u5B9A_u4E49" class="headerlink" title="BFC 定义"></a>BFC 定义</h3><p> <code>BFC(Block formatting context)</code> 直译为 <code>块级格式化上下文</code>。它是一个独立的渲染区域，只有 <code>Block-level box</code> 参与， 它规定了内部的 <code>Block-level Box</code> 如何布局，并且与这个区域外部毫不相干。</p>
</li>
<li><h3 id="BFC_u5E03_u5C40_u7279_u6027"><a href="#BFC_u5E03_u5C40_u7279_u6027" class="headerlink" title="BFC布局特性"></a>BFC布局特性</h3><ul>
<li><p>内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；</p>
</li>
<li><p>处于同一个BFC中的元素相互影响，可能会发生<code>margin collapse</code>；</p>
</li>
<li><p>每个元素的 <code>margin box</code> 的左边，与容器块 <code>border box</code> 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；</p>
</li>
<li><p>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；</p>
</li>
<li><p>计算 <code>BFC</code> 的高度时，考虑 <code>BFC</code> 所包含的所有元素，连浮动元素也参与计算；</p>
</li>
<li><p>浮动盒区域不叠加到 <code>BFC</code> 上这么多性质有点难以理解，但可以作如下推理来帮助理解：<code>html</code> 的根元素就是 <code><html></code>，而根元素会创建一个 <code>BFC</code>，创建一个新的 <code>BFC</code> 时就相当于在这个元素内部创建一个新的<html>，子元素的定位就如同在一个新<html>页面中那样，而这个新旧 <code>html</code> 页面之间时不会相互影响的。上述这个理解并不是最准确的理解，甚至是将因果倒置了<strong>（因为 <code>html</code> 是根元素，因此才会有 <code>BFC</code> 的特性，而不是 <code>BFC</code> 有 <code>html</code> 的特性）</strong>，但这样的推理可以帮助理解 <code>BFC</code> 这个概念。</html></html></p>
</li>
</ul>
</li>
</ul>
<hr>
<h1 id="u54EA_u4E9B_u5143_u7D20_u4F1A_u751F_u6210BFC_uFF1F"><a href="#u54EA_u4E9B_u5143_u7D20_u4F1A_u751F_u6210BFC_uFF1F" class="headerlink" title="哪些元素会生成BFC？"></a>哪些元素会生成BFC？</h1><ul>
<li><p>根元素<code><html></code></p>
</li>
<li><p><code>float</code> 属性不为 <code>none</code></p>
</li>
<li><p><code>position</code> 为 <code>absolute</code> 或 <code>fixed</code></p>
</li>
<li><p><code>display</code> 为 <code>inline-block, table-cell, table-caption, flex, inline-flex</code></p>
</li>
<li><p><code>overflow</code> 不为 <code>visible</code></p>
</li>
</ul>
<p><img src="http://ww3.sinaimg.cn/large/4837a46fjw1ezz9fn6lxoj20yg0szjtf.jpg" alt=""></p>
<hr>
<h1 id="margin_collapse_uFF08_u8FB9_u8DDD_u574D_u584C_26amp_3B_u8FB9_u8DDD_u91CD_u53E0_uFF09"><a href="#margin_collapse_uFF08_u8FB9_u8DDD_u574D_u584C_26amp_3B_u8FB9_u8DDD_u91CD_u53E0_uFF09" class="headerlink" title="margin collapse（边距坍塌&边距重叠）"></a>margin collapse（边距坍塌&边距重叠）</h1><ul>
<li>在理解bfc的原理之前先让我们理解一下什么是<code>margin collapse</code>（边距坍塌&边距重叠）<br> <br><img src="http://ww4.sinaimg.cn/large/4837a46fjw1ezz9g2xc1nj20pw0gb77p.jpg" alt=""><br> </li>
</ul>
<h3 id="u5B9E_u4F8B_uFF1A"><a href="#u5B9E_u4F8B_uFF1A" class="headerlink" title="实例："></a>实例：</h3><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="title">html</span>></span></span><br><span class="line"><span class="tag"><<span class="title">style</span>></span><span class="css"></span><br><span class="line"> <span class="class">.box2</span><span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightblue</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">100px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line"></span><span class="tag"></<span class="title">style</span>></span> </span><br><span class="line"><span class="tag"><<span class="title">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"box2"</span>></span><span class="tag"></<span class="title">div</span>></span></span><br><span class="line"><span class="comment"><!-- </span><br><span class="line"> 当box2中没有任何填充内容，文字或图片等。</span><br><span class="line"> 且没有指定垂直边框 [ boder-top、boder-bottom ]</span><br><span class="line"> 那么上面的代码在页面上不会显示任何效果。</span><br><span class="line"> 当我们为box2里填充一些文字:</span><br><span class="line">--></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"box2"</span>></span></span><br><span class="line"> 这是box2填充内容</span><br><span class="line"> <span class="tag"></<span class="title">div</span>></span></span><br><span class="line"><span class="tag"></<span class="title">body</span>></span> </span><br><span class="line"><span class="tag"></<span class="title">html</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="http://ww3.sinaimg.cn/large/4837a46fjw1ezz9h0ns6zj205x02iglg.jpg" alt=""><br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*或者指定垂直边框 boder-top、boder-bottom*/</span></span><br><span class="line"><span class="class">.box2</span><span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightblue</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">100px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border-top</span>:<span class="value"><span class="number">1px</span> solid transparent </span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure></p>
<p><img src="http://ww2.sinaimg.cn/large/4837a46fjw1ezz9hd2cp2j209e03k3y9.jpg" alt=""></p>
<blockquote>
<p>一个 <code>DIV</code> 和它的子 <code>DIV</code> 特别重视 <strong>垂直边框</strong>或<strong>填充</strong>，也就好像是，一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填充就是这个“锅盖”。<br>于是解决的方式至少有以下三种：<br> <strong>1.</strong> 边框，当然可以设置边框为透明;<br> <strong>2.</strong> 为父容器添加 <code>padding</code>，或者至少添加 <code>padding-top</code>;<br> <strong>3.</strong> 将父容器 <code>BFC</code> 化;</p>
</blockquote>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="title">html</span>></span></span><br><span class="line"><span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="class">.box</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightblue</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">300px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">250px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">20px</span></span></span>;</span><br><span class="line"> <span class="comment">/* </span><br><span class="line"> 1.设置垂直边框</span><br><span class="line"> border-top:1px solid transparent ;</span><br><span class="line"> border-bottom: 1px solid transparent;</span><br><span class="line"> </span><br><span class="line"> 2.为父DIV添加padding，或者至少添加padding-top</span><br><span class="line"> padding: 1px 0;</span><br><span class="line"> </span><br><span class="line"> 3.各种可BFC化得条件</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> */</span></span><br><span class="line"> }</span></span><br><span class="line"> <span class="class">.children</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightcoral</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">10px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line"></span><span class="tag"></<span class="title">style</span>></span></span><br><span class="line"><span class="tag"><<span class="title">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"box"</span>></span><span class="tag"></<span class="title">div</span>></span> </span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"box"</span> <span class="attribute">style</span>=<span class="value">"height: auto;"</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"children"</span> ></span><span class="tag"></<span class="title">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">div</span>></span></span><br><span class="line"><span class="tag"></<span class="title">body</span>></span></span><br><span class="line"><span class="tag"></<span class="title">html</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="http://ww1.sinaimg.cn/large/4837a46fjw1ezz9hm69vej20bq0eqq30.jpg" alt=""></p>
<p><strong>以上三种方式最终效果都一样</strong></p>
<hr>
<h1 id="u4EE3_u7801_u5B9E_u4F8B_u4E0EBFC_u539F_u7406_u5206_u6790"><a href="#u4EE3_u7801_u5B9E_u4F8B_u4E0EBFC_u539F_u7406_u5206_u6790" class="headerlink" title="代码实例与BFC原理分析"></a>代码实例与BFC原理分析</h1><h3 id="u5B9E_u4F8B_-_1"><a href="#u5B9E_u4F8B_-_1" class="headerlink" title="实例 - 1"></a>实例 - 1</h3><ul>
<li>特性1，特性2，特性4<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="title">html</span>></span></span><br><span class="line"><span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span><span class="css"></span><br><span class="line"><span class="class">.bfc</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> lightblue</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">overflow</span>:<span class="value"> hidden</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">500px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">p</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> lightcoral</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">50px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">50px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">10px</span> </span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="class">.new-bfc</span><span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">overflow</span>:<span class="value"> hidden</span></span>;</span><br><span class="line">}</span></span><br><span class="line"></span><span class="tag"></<span class="title">style</span>></span></span><br><span class="line"><span class="tag"><<span class="title">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"bfc"</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">p</span>></span>children 1<span class="tag"></<span class="title">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">p</span>></span>children 2<span class="tag"></<span class="title">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">p</span>></span>children 3<span class="tag"></<span class="title">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"new-bfc"</span>></span> </span><br><span class="line"> <span class="tag"><<span class="title">p</span>></span>children 4<span class="tag"></<span class="title">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">div</span>></span></span><br><span class="line"><span class="tag"></<span class="title">body</span>></span></span><br><span class="line"><span class="tag"></<span class="title">html</span>></span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><img src="http://ww1.sinaimg.cn/large/4837a46fjw1ezz9hvediuj20tl0b4tav.jpg" alt=""></p>
<hr>
<h3 id="u5B9E_u4F8B_-_2"><a href="#u5B9E_u4F8B_-_2" class="headerlink" title="实例 - 2"></a>实例 - 2</h3><ul>
<li>特性3 特性6<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="title">html</span>></span></span><br><span class="line"><span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">0</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">200px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> <span class="id">#box</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightblue</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">600px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> <span class="class">.right</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightcoral</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">opacity</span>:<span class="value"> <span class="number">0.5</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">3px</span> solid saddlebrown</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">300px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">min-height</span>:<span class="value"> <span class="number">100px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> <span class="class">.left</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightseagreen</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">3px</span> solid saddlebrown</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line"></span><span class="tag"></<span class="title">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"left"</span>></span><span class="tag"></<span class="title">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"right"</span>></span><span class="tag"></<span class="title">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">body</span>></span></span><br><span class="line"><span class="tag"></<span class="title">html</span>></span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><img src="http://ww1.sinaimg.cn/large/4837a46fjw1ezz9i4fm4rj20it0bnt96.jpg" alt=""><br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*当给 [ .left ] 加上左浮动*/</span></span><br><span class="line"> <span class="class">.left</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightseagreen</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">3px</span> solid saddlebrown</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">float</span>:<span class="value"> left</span></span>;</span><br><span class="line"> }</span></span><br></pre></td></tr></table></figure></p>
<p><img src="http://ww4.sinaimg.cn/large/4837a46fjw1ezz9icpwdej20tj0e441g.jpg" alt=""></p>
<hr>
<h3 id="u5B9E_u4F8B_-_3"><a href="#u5B9E_u4F8B_-_3" class="headerlink" title="实例 - 3"></a>实例 - 3</h3><ul>
<li>特性5<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 现在通过 给 [ #box ] 设置 [ overflow:hidden ] 来创建[ BFC ]，再看看效果如何。*/</span> </span><br><span class="line"><span class="id">#box</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightblue</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">600px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">overflow</span>:<span class="value"> hidden</span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><img src="http://ww1.sinaimg.cn/large/4837a46fjw1ezz9ijj1mmj20t008g0ud.jpg" alt=""></p>
<hr>
<h3 id="u5B9E_u4F8B_-_4"><a href="#u5B9E_u4F8B_-_4" class="headerlink" title="实例 - 4"></a>实例 - 4</h3><ul>
<li>特性4<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 现在通过 给 [ .right ] 中放入一些灰色小块，再看看效果如何。*/</span> </span><br><span class="line"><span class="class">.item</span><span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightslategrey</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">50px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">50px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">10px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">float</span>:<span class="value"> left</span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><img src="http://ww1.sinaimg.cn/large/4837a46fjw1ezz9irn411j20s00a6tan.jpg" alt=""><br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*接下来，在[ .item ]的父元素 [ .right ] 上我们也添加一个左浮动，再看看效果。 */</span></span><br><span class="line"><span class="class">.right</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> lightcoral</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">opacity</span>:<span class="value"> <span class="number">0.5</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">3px</span> solid saddlebrown</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">300px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">min-height</span>:<span class="value"> <span class="number">100px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">float</span>:<span class="value"> left</span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure></p>
<p><img src="http://ww4.sinaimg.cn/large/4837a46fjw1ezz9j014cyj20ss09r761.jpg" alt=""></p>
<hr>
<blockquote>
<p>以上就是 <code>BFC</code> 的分析，<code>BFC</code> 的概念比较抽象，但通过实例分析应该能够更好地理解 <code>BFC</code>。在实际中，利用 <code>BFC</code> 可以闭合浮动<strong>（实例3）</strong>，防止与浮动元素重叠<strong>（实例4）</strong>。同时，由于BFC的隔离作用，可以利用<code>BFC</code>包含一个元素，防止这个元素与<code>BFC</code>外的元素发生<code>margin collapse</code>。<br>参考<br><a href="http://www.wtoutiao.com/p/AfdISl.html" target="_blank" rel="external">http://www.wtoutiao.com/p/AfdISl.html</a><br><a href="http://blog.chinaunix.net/uid-22414998-id-3138656.html" target="_blank" rel="external">http://blog.chinaunix.net/uid-22414998-id-3138656.html</a><br><a href="http://www.jianshu.com/p/fc1d61dace7b" target="_blank" rel="external">http://www.jianshu.com/p/fc1d61dace7b</a></p>
</blockquote>
]]></content>
<summary type="html">
<![CDATA[<h1 id="u4EC0_u4E48_u662FBFC_uFF1F"><a href="#u4EC0_u4E48_u662FBFC_uFF1F" class="headerlink" title="什么是BFC？"></a>什么是BFC？</h1><p>在解释 <code>BFC</code> 是什么之前，需要先介绍 <code>Box</code>、<code>Formatting Context</code>的概念。</p>
<ul>
<li><h3 id="Box_uFF1A_CSS__u5E03_u5C40_u7684_u57FA_u672C_u5355_u4F4D"><a href="#Box_uFF1A_CSS__u5E03_u5C40_u7684_u57FA_u672C_u5355_u4F4D" class="headerlink" title="Box： CSS 布局的基本单位"></a>Box： <code>CSS</code> 布局的基本单位</h3><p><code>Box</code>是<code>CSS</code>布局的对象和基本单位， 直观点来说，就是一个页面是由很多个<code>Box</code>组成的。元素的类型和<code>display</code>属性，决定了这个<code>Box</code>的类型。 不同类型的 <code>Box</code>会参与不同的<code>Formatting Context</code>（一个决定如何渲染文档的容器），因此<code>Box</code>内的元素会以不同的方式渲染。让我们看看有哪些盒子：</p>]]>
</summary>
<category term="css2，BFC" scheme="http://yoursite.com/tags/css2%EF%BC%8CBFC/"/>
<category term="CSS2" scheme="http://yoursite.com/categories/CSS2/"/>
</entry>
</feed>