此時預覽此代碼,我們會發(fā)現最外層的父元素float container,并沒有顯示。這是因為子元素因進行了浮動,而脫離了文檔流,導致父元素的height為零。
Some Content
定義CSS類,進行“浮動清理”的控制:
Code:
.clearfix:after {
content: “.”;
clear: both;
height: 0;
visibility: hidden;
display: block;
}
這是對Firefox進行的處理,因為Firefox支持生成元素,而IE所有版本都不支持生成元素
.clearfix {
display: inline-block;
}
/* 這是對 Mac 上的IE瀏覽器進行的處理 */
* html .clearfix {height: 1%;}
/* 這是對 win 上的IE瀏覽器進行的處理 */
.clearfix {display: block;}
/* 這是對display: inline-block;進行的修改,重置為區(qū)塊元素*/
會發(fā)現即使子元素進行了浮動,父元素float container仍然會將其包圍,進行高度自適應。
clear元素的margin-top被重置為零