css 盒模型文檔流幾種清除浮動的方法實例詳解

發(fā)布時間：2018-09-10 17:17:25 作者：佚名

我要評論

這篇文章主要介紹了css 盒模型文檔流幾種清除浮動的方法實例詳解,需要的朋友可以參考下

盒模型

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

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

盒子陰影

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

文檔流

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

浮動

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

清除浮動

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

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

怎么去清除浮動?

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

1.給父盒子設置高度

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

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;
        }

總結(jié)

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