css 盒模型 文件流 幾種清除浮動的方法

G_Owen發表於2018-09-10
CSS模型

盒模型

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

 

相關文章