高度塌陷的問題：


?? ?當開啟元素的BFC以后，元素將會有如下的特性

?? ?1 父元素的垂直外邊距不會和子元素重疊
?? ?開啟BFC的元素不會被浮動元素所覆蓋
?? ?開啟BFC的元素可以包含浮動的子元素

?? ?如何開啟元素的BFC

?? ?設置元素浮動
?? ?設置元素絕對定位
?? ?設置元素為inline-block

?? ?float:left; (不好)? 雖然可以撐開父元素 會導致父元素寬度丟失了

?? ?而且使用這種方式導致下邊的元素上移。


?? ?display:inlink-block;

?? ?布局好了，但是寬度又沒有了。但是會導致寬度丟失，不推薦使用這種方式



?? ?4 將元素的overflow? 設置非visible值


?? ?overflow:visible




?? ?overflow:auto;? 解決父元素高度塌陷 副作用最小的
?? ??? ??? ?hidden;


兼容性

?在IE6中沒有BFC, 但是具有另一個隱含的屬性叫hasLayout.

?該屬性的作用和BFC類似，所在IE6瀏覽器通過開啟hasLayout來解決問題。


?方式：

??? ?元素的zoom設置為1即可


??? ?zoom:1


??? ?在 IE6中如果為一個元素指定了一個寬度，則會默認開啟一個

??? ?hasLayout.

clear:? both 清楚對他影響最大的那個元素的浮動

?

解決高度塌陷的方案二

??? ?可以直接在高度塌陷的父元素的最后，添加一個空白的div

??? ?由于這個div并沒有浮動，他是可以撐開父元素高度的

??? ?然后對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有副作用

??? ?雖然可以解決問題啊，但是在頁面中添加多余的結構。



?? ?**********************************?? ?==> ?? ?通過after偽類 設置為塊級元素 清除兩邊浮動 解決父類塌陷的問題



??? ?通過after偽類，選中box1的后邊

??? ?.box1:after{

??? ??? ?content:"";
??? ??? ?display:block;

??? ??? ?//清除兩側的浮動

??? ??? ?clear:both;

??? ?}

??? ?IE6不支持偽類。? zoom:1;



??? ?.clearfix:after{
??? ??? ?/*添加一個內容*/
??? ??? ?content:"";
??? ??? ?/*轉換為一個塊元素*/
??? ??? ?display:block;
??? ??? ?/*清除兩側的浮動*/
??? ??? ?clear:both;
??? ?}


??? ?/*在IE6中不支持after偽類，
??? ?所以在IE6中還需要使用hasLayout來處理*/

??? ?.clearfix{
??? ??? ?zoom:1;
??? ?}

IE6中如果上面的是內聯元素?? ?也是浮不上去的?

終極版：

//經過修改后的clearfix是一個多功能的
//既可以解決高度塌陷，又可以確保父元素
和子元素的垂直外邊距重疊

.clearfix:before,
.clearfix:after{
?? ?content:"";
?? ?display:table;
?? ?clear:both;
}

?

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=ih1ikj&title=html高度塌陷問題解決