触发BFC实现简单自适应

首先试一下代码

<span style="white-space:pre">			</span>.div{
				/*width: 600px;*/
				height: 400px;
				border: 5px solid red;
			}
			.a{
				width: 300px;
				height: 200px;
				background: palegreen;
				float: left;
			}
			.b{
				height: 300px;
				background: salmon;	
				overflow: hidden;     /*触发BFC*/
			}

<pre name="code" class="html"><span style="white-space:pre">			</span><div class="div">
			<div class="a">我是a</div>
			<div class="b">我是b</div>
		</div>

触发b产生BFC后，这个新的BFC就不予与浮动元素产生重叠，因此会根据包含块的宽度，和a元素的宽度，来自动变窄，因而我们可以通过触发B产生BFC，来实现自适应。

原理是运用了BFC的第四条规则

BFC的区域不会与float box重叠