浮動元素 add 顯示 margin 類型 其他屬性 其他 ont 一行

1 盒子模型

1.1 別人的基本總結

盒子的寬度 = margin-left + border-left + padding-left +width + padding-right + border-right + margin-right
1.2 如果內容區過大，將會溢出，此時可使用overflow

/* 默認值。內容不會被修剪，會呈現在元素框之外  */
overflow: visible;
/* 內容會被修剪，並且其余內容不可見  */
overflow: hidden;
/* 內容會被修剪，瀏覽器會顯示滾動條以便查看其余內容  */
overflow: scroll;
/* 由瀏覽器定奪，如果內容被修剪，就會顯示滾動條  */
overflow: auto;
 

1.3 框類型(常用) display

| 值 | 說明 |

| ---------- | :---------- : | ----------: |

| block | 塊框（ block box）是定義為堆放在其他框上的框（例如：其內容會獨占一行），而且可以設置它的寬高，之前所有對於框模型的應用適用於塊框 （ block box） |

| inline | 行內框與塊框是相反的，隨著文檔的文字對行內盒設置寬高無效，設置padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框不會有影響 |

| inline-block | 行內塊狀是兩種的集合不會重新另起一行但會像行內框一樣隨著周圍文字而流動，而且他能夠設置寬高，並且保持了其塊特性的完整性，它不會在段落行中斷開 |

2.浮動 float（會讓元素block化）

慕課網-CSS深入理解之float浮動(張鑫旭)
具有包裹性的其他屬性:

display:inline-block
position:absolute/fixed/sticky
overflow:hidden/scroll

2.1 清除浮動 (clearfix hack)
2.1.1 投機取巧法
在父元素底部加上

雖說兼容性好，但是浪費一個標簽，違反了語義化，不推薦
2.1.2 overflow + zoom法
補充知識: BFC(Block Formatting Context)
BFC:塊級格式化上下文【在css3中叫Flow Root】是一個獨立布局環境，相鄰盒子margin垂直方向會重疊。
什麽樣的元素會為其內容生成一個BFC呢？
浮動元素，即float:left/right
絕對定位元素，即position:absolute/fixed
塊容器，即display:table-cell/table-caption/inline-block
設置了除visible外的overflow值的塊盒子，即overflow:hidden/scroll/auto
BFC特性：

• 1 創建了BFC的元素中，子浮動元素也會參與高度計算
• 2 與浮動元素相鄰的、創建了BFC的元素，都不能與浮動元素相互覆蓋

• 3 創建了BFC的元素不會與它們的子元素margin重疊
  因為子浮動元素也會參與高度計算, 所以借此可以得到以下方法:

  .fix {
  overflow:hidden; zoom:1;
  }

  方法不錯，但是可能內容會被裁減掉。
  2.1.3 after + zoom法 通過CSS來添加子元素，不修改HTML代碼 —— :after選擇符(最佳方法)

  .clearfix:after {
  content: " ";  //content可以任意發揮
  display: block;
  line-height: 0;  //height: 0也行
  clear: both;
  }
  .clearfix {
  zoom: 1; 
  }

  2.2 浮動布局
  
  
  2.3 float與流體布局

前端基礎(一)