国产日韩欧美日韩网站,久久精品中文字幕无码绿巨人

表現(xiàn)
例如：
HTML：

【淺談CSS 高度塌陷問題】CSS：

表現(xiàn)為：

產(chǎn)生的原因
由上面的例子可以看出，first盒子沒有設(shè)置高度，由子元素撐開，但是由于子盒子設(shè)置了浮動，脫離了標(biāo)準(zhǔn)流，所以導(dǎo)致first盒子沒有高度，表現(xiàn)為second和third盒子向上移動了。
可以得出產(chǎn)生高度塌陷的原因：
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動以后，子元素會完全脫離文檔流，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導(dǎo)致頁面布局混亂。
高度塌陷的解決辦法：
1、給父元素設(shè)置固定高度。但是使用這種方式后，父元素的高度就不能根據(jù)子元素自動撐高了，可以根據(jù)自己頁面的特點，如果可以固定高度，可以使用這種方式，否則，不推薦這種方式。
2、額外標(biāo)簽法，這是w3c推薦的解決方案，但是不推薦，因為html的原則是寫出語義化的標(biāo)簽，這種方式會額外增加無意義的標(biāo)簽。

3、父元素的overflow屬性(開啟元素的BFC)：

使用這種方式，屬性值可以是非visible(hidden/auto/scroll)中任意，但是建議用hidden 。
這種方式副作用較小，這種方式在ie6中不支持，可以外加zoom: 1;

4、單偽元素after清除浮動(開啟元素的BFC)：

這種方式現(xiàn)在使用比較廣泛，很多大網(wǎng)站都是使用這種方式，副作用較小，只需要在配合處理ie6就可以了。
5、雙偽元素清除浮動(開啟元素的BFC)：

這種做法寫法比較麻煩，也不推薦。
清除浮動對父元素的影響后的效果：

BFC相關(guān)
根據(jù)W3C的標(biāo)準(zhǔn)，在頁面中元素都一個隱含的屬性叫做Block Formatting Context，簡稱BFC，該屬性可以設(shè)置打開或者關(guān)閉，默認是關(guān)閉的。
當(dāng)開啟元素的BFC以后，元素將會具有如下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啟BFC的元素不會被浮動元素所覆蓋
3.開啟BFC的元素可以包含浮動的子元素