方法一 position
分別使用 position：absolute|| fixed,脫離文件流，相對父級一級一級查詢，第一次出現position的容器進行定位自身位置會被後面的元素占用，
或者是relative，相對自身定位，自身的位置依然保留在文件流中，使用top,left,bottom,right進行定位
分別對需要浮動的元素新增float，同時，浮動的元素脫離文件流。 css樣式，且為了不影響後面的文件流的預期位置，需要對浮動元素進行清除浮動。方法一：向父元素新增能包裹改浮動元素固定的高寬。
方法二：
新增
新增向浮動元素的第一父類的偽元素增加浮動清除類.clearfix:before,.clearfix:after
.clearfix
.box
.box1
小問題測試：
主軸 豎直，交叉軸方向？
交叉軸在水平方向上。
彈性布局改變的是什麼？
改變的是父類容器為彈性規則布局，子元素變為行內塊特性。
父容器為彈性布局，請問子元素全部是否全是行內塊元素？
可以包含行內塊元素，塊元素，但是改過後標籤全部為行內塊元素。
彈性布局以什麼軸排列？
主軸和交叉軸
彈性布局樣式
/*
row-reverse 類似對子元素新增往右的浮動，但不用清除浮動,
column 類似對子元素進行 display:inline-block; + 豎直排列,預設順序不變
column-reverse 類似對子元素進行 display:inline-block; + 豎直排列，預設順序從左下角往左上角順序排列
*//*
使用彈性布局後，span 和 div 都會變成行內塊元素，可以設定內容大小,
而在中，會將修改後的寬度依然儲存著。
*/
/* 允許彈性換行，換列
flex-wrap: wrap;
換行順序：允許換行，並且從右上角開始，往下擊沉，當這一行內容足夠，且還有餘下的兄弟行內塊元素，換行繼續排列
flex-wrap: wrap-reverse：
換行順序：允許換行，並且從右下角開始，往上冒泡，當這一行內容足夠時，往上繼續排列
排列順序由右下角開始，從 右 水平往 左移動，
*//* flex-wrap: wrap-reverse; */
flex-start：與主軸的起點對齊。
flex-end：與主軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與主軸兩端對齊，軸線之間的間隔平均分布，且子元素靠父元素邊上。
space-around：主軸線兩側的間隔都相等，就相當於給子元素每個都新增 margin,
magin-left = margin-right;
所以，它會距離父元素在主軸方向上有一定的距離。
/*
交叉軸：
align-items: center;
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
align-items: stretch（預設值）：軸線佔滿整個交叉軸。
align-items:baseline;
baseline:以第一行文字的基線（水平線）對齊， 第一行文字的水平位置對齊，但是，有時候效果不是你想要的那樣，
比如在文字前面加上，就會出現不一樣的部分 意外 布局
注意：ie9 及ie9以下不相容，效果破壞
*/
.box正二 倒二 左側邊最大豎立的二 右側邊是最大豎立的二
css 部分
01
0203
0405
010203
0405
010203
0405
010203
0405
010203
0405
010203
0405
彈性盒子布局
彈性子元素屬性 鳴謝彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空...
flex盒子布局
flex布局語法教程 網頁布局 layout 是css的乙個重點應用 布局的傳統解決方案 基於盒狀模型，依賴display position float屬性。它對於那些特殊布局非常不便，比如，垂直劇中就不易實現 傳統解決垂直居中 class content 通過position設定為不是static...
flex盒子布局
看過很多對於彈性盒子flex的簡介，但還是覺得阮一峰大神的解析和張鑫旭大神 舊版flex 的解析比較容易理解，下面，我以自己的理解來敘述關於flex彈性布局！在flex中，有容器和專案之分，但也只是相對的，假如說 div1裡面有div2，div2裡面有div3，而且他們都被定義為flex盒子 div...