css 盒模型文檔流幾種清除浮動(dòng)的方法實(shí)例詳解

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

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

盒模型

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

2、box-sizing:border-box 以盒子邊框?yàn)榻?自己管理里面的元素 border-box 盒子大小為 width 就是說(shuō) padding 和 border 是包含到width里面的

盒子陰影

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

文檔流

普通流（標(biāo)準(zhǔn)流）浮動(dòng)定位

浮動(dòng)

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

清除浮動(dòng)

清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。

我們有時(shí)候不方便給父盒子高度或者不知道父盒子的高度這個(gè)時(shí)候就需要清除浮動(dòng)

怎么去清除浮動(dòng)?

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

1.給父盒子設(shè)置高度

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

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

*4.overflower:hidden 溢出隱藏

*5.

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

6. *zoom:1;處理ie6以下的版本兼容問(wèn)題

*7.雙偽元素清除浮動(dòng)

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

總結(jié)

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