盒模型

1、box-sizing: content-box 是普通的默認的一種盒子表現模式      盒子大小為 width + padding + border   content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode  

2、box-sizing:border-box 以盒子邊框為界 自己管理里面的元素     border-box  盒子大小為 width    就是說  padding 和 border 是包含到width里面的

盒子陰影

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內(inset)/外陰影；

文檔流

普通流（標準流）浮動定位

浮動

浮動出現:解決文字環繞的效果后來發現浮動可以做很多事浮動會脫離標準流 不會占有原來的位置浮動 是找的離他最近的父元素浮動的對齊方式是頂部對齊  浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。浮：    加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。漏：    加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。特：    特別注意，這是特殊的使用，有很多的不好處，使用要謹慎。

 清除浮動

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

我們有時候不方便給父盒子高度 或者不知道父盒子的高度 這個時候就需要清除浮動

怎么去清除浮動?

    clear:both 同時清除左右兩側浮動的影響  

1.給父盒子設置高度  

*2.額外標簽法 : 添加一個額外的標簽  clear:both   起到分離上部分和下部分的作用          影響了本身html結構  

3.給父盒子一個display:table  但是有缺陷  建議 不要使用  

*4.overflower:hidden  溢出隱藏  

*5.

.father:after {
content: ".";/* 這里不建議大家使用"" */
display: block;
clear: both;
height: 0;
visibility: hidden;
}

6. *zoom:1;處理ie6以下的版本兼容問題​  

*7.雙偽元素清除浮動

.clearfix:before,.clearfix:after {
content:".";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

總結

以上所述是小編給大家介紹的css 盒模型 文檔流 幾種清除浮動的方法實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對軟件開發網網站的支持！