1. 程式人生 > >overflow解決浮動高度塌陷問題的原理--觸發BFC

overflow解決浮動高度塌陷問題的原理--觸發BFC

<div class="div">
	<div></div>
		</div>
<pre name="code" class="html"><style type="text/css">
			.div{
				width: 600px;
				border:5px solid black;
				overflow: hidden;
			}
			div{
				width: 400px;
				height: 200px;
				background: blue;
				float: left;
			}
		</style>



父級元素設定了overflow:hidden;屬性後佈局正常,觸發了BFC,導致了該父級就會按照BFC的規則進行佈局。

BFC規則之一

計算BFC的高度時,浮動元素也計算在內。(這個就是用overflow:hidden;來清除浮動 重新算高度的原理)