圣杯布局：

含義：中間容器高旁邊兩側(cè)的容器低，整個布局看上去像一個圣杯、

css實現(xiàn)方式：

1.定義一個最外層的容器，在容器里定義一個子元素main

2.在子元素里在定義“ 左中右”三個盒子，給三個盒子設(shè)置固定高度，在給背景色方便查看

3.給設(shè)置左右內(nèi)邊距給左右兩側(cè)的容器留出空間

（要想元素橫著排需要添加float屬性/彈性盒）

4.給左邊的盒子寬加浮動float：left

5.給中間的盒子100%的寬度和左浮動使其撐滿父容器（左側(cè)折行）

（將左側(cè)容器向左移動父容器寬度即可）

6.為左側(cè)盒子添加 margin-left：-100%

（在父元素的左上角）

7.在為左邊的盒子添加相對定位讓他向左移動200px

8，為右邊盒子添加寬300px、浮動float：left和margin-right:-300px

最終效果：左右元素不動，中間元素自適應(yīng)。

注意：由于三個元素都添加了浮動，撐不開父元素，所以要給父元素設(shè)置固定高度或者做浮動的清理