CSS最佳實踐+套路（七） - 佈局

概述

在我們平時佈局的時候，一般都是選擇浮動佈局和Flex佈局。如果項目需要支持IE8，那麼推薦選擇浮動佈局，如果不需要支持IE8，那麼儘量選擇Flex佈局，當我們不需要支持IE8的時候，那麼我們就能使用很多高級的語法，例如：計算值（）

原則

1. 寫不要死width狀語從句：height
2. 儘量選擇flex，calc
3. 如果是IE，那麼上述兩點全部推翻，能寫死就寫死

浮佈局

1. 子元素：float: left | right
2. 父元素：添加clearfix類

   1 2 3 4 5

   clearfix :: after { content：''; 顯示：塊; 明確：兩者; }

Flex佈局

在CSS最佳實踐+套路（六） - flex一文中已經詳細介紹了關於FLex的相關屬性.Flex佈局主要是

1. 父元素：display: flex;+彈性容器相關屬性
2. 子元素：彈性項目相關屬性

最佳實踐和套路

實現這種佈局

每個模塊都是一樣的，四個模塊佔據一行，中間有邊際，四個模塊佔據的寬度是一定的。

1. float + margin負值法
   HTML：

   1 2 3 4 5 6 7

   <div class =“container”> <div class =“inner”> <ol class =“clearfix”> li * 10 </ ol> </ div> </ div>

   CSS：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   .container { width：960px; 保證金：0汽車; } .clearfix { content：''; 顯示：塊; 明確：兩者; } .inner { margin：0 - 間距/ 2px; } li { width： float：left; }

2. flex + margin負值法
   HTML：

   1 2 3 4 5 6 7

   <div class =“container”> <div class =“inner”> <ol> li * 10 </ ol> </ div> </ div>

   CSS：

   1 2 3 4 5 6 7 8 9

   .container { width：960px; 保證金：0汽車; } ol { display：flex; 證明內容：空間之間; margin：0 - 間距/ 2px; }

3. flex + calc 
   HTML：

   1 2 3 4 5 6 7

   <div class =“container”> <div class =“inner”> <ol> li * 10 </ ol> </ div> </ div>

   CSS：

   1 2 3 4 5 6 7 8 9 10 11

   .container { width：960px; 保證金：0汽車; } ol { display：flex; 證明內容：空間之間; } li { calc（25％ - 8px）// 20％*父元素寬度 - 8px }

• 
  

©CZBBhkrx