<big>和浮動元素相關的界面設計 的 幾點總結</big>

• 浮動元素會自動被轉化為塊級元素，相當于給元素設置了display：block；
• 塊級元素獨占一行，可以設置寬高以及邊距，行內元素不會獨占一行，設置寬高行距等不會起效。常見的塊級元素為h1~h6,p,div,ul,table，常見的行內元素為span,a,input,select；
• 浮動元素如果和非浮動塊級元素位置發生重疊，非浮動塊級元素會置于浮動元素下面；
  浮動元素如果和非浮動行內元素位置發生重疊，非浮動行內元素會置于浮動元素的上面；
• 多個同方向浮動元素一般是按照流式布局，一行滿了則自動換行；
  多個同方向浮動元素若是高度不一致的話，用float可能會產生意想不到的錯誤；
• 元素浮動后會脫離文檔流，所以父元素是無法根據元素來自適應的，這時就需要clear：both的幫助；

clear:both的效果

根據前面的格式把后面的撐大；

注意css中各不同語句的出場順序，下例中如果[class*='col-']定義到后面則不會得到想要的效果
summary：注意各標簽之間的覆蓋關系；

[class *="col-"]{
width: 100%;
}

@media only screen and (min-width: 768px){
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}