布局類型紫新、清除浮動(dòng)李剖、垂直居中（定高、不定高）解決
基于盒模型的傳統(tǒng)布局
1. 文檔流布局：塊級(jí)元素占據(jù)一行杖爽，行內(nèi)元素共享一行，按順序一個(gè)個(gè)顯示腋寨。
2. 浮動(dòng)布局：使用float屬性使標(biāo)簽元素脫離文檔化焕，后面的元素占據(jù)原來(lái)的位置，并按文檔流顯示。
浮動(dòng)帶來(lái)的問(wèn)題： 默認(rèn)希望是子元素的高度撐起父元素的高度键兜，但由于子元素設(shè)置了浮動(dòng)穗泵，父元素沒(méi)有高度，會(huì)造成
父元素的高度塌陷现诀。
清除浮動(dòng)帶來(lái)的影響：
- 在父元素內(nèi)部添加一個(gè)不浮動(dòng)煩人空元素履肃，并設(shè)置樣式clear:both。
- 設(shè)置父元素的樣式：overflow:hidden封锉，觸發(fā)BFC（Block Formatting Context)膘螟。開啟BFC的元素不能被浮動(dòng)元素覆蓋，可以包含浮動(dòng)元素萍鲸。
- 父元素使用偽類清楚浮動(dòng)：給父元素添加一個(gè)clearfix類。
.clearfix:after{
content:"";//偽類必須還有content握侧，這里設(shè)置為空的content
display:block;
clear:both;
}
3. 定位布局：使用position:absolute/relative/fixed/static(默認(rèn))來(lái)實(shí)現(xiàn)絕對(duì)嘿期、相對(duì)布局
彈性布局(flex)
flex布局是css3里面加入的布局方式，ie9不支持萄传。webkit內(nèi)核的瀏覽器需要加上webkit的前綴蜜猾。
父元素作為容器，需要設(shè)置display:flex樣式蹭睡。使用flex布局的容器內(nèi)部的子元素的float、clear脊串、vertical-align屬性
都將失效。
容器（父元素）可以設(shè)置的屬性：
- flex-direction: row | row-reverse | column | column-reverse;設(shè)置容器主軸的方向
- flex-wrap: nowrap | wrap | wrap-reverse;設(shè)置軸線上放闺，當(dāng)子元素拍不下缕坎，如何顯示。
- flex-flow: flex-direction || flex-wrap;為flex-direction和flex-wrap的簡(jiǎn)寫方式念赶，默認(rèn)為：row nowrap.
- justify-content: flex-start | flex-end | center | space-between | space-around;設(shè)置項(xiàng)目（子元素）在主軸上的對(duì)齊方式叉谜。
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;子元素存在多根軸線才起作用踩萎，（子元素也是用彈性布局？）
- align-items: flex-start | flex-end | center | baseline | stretch;定義項(xiàng)目在交叉軸上如何對(duì)齊
項(xiàng)目（子元素）可以設(shè)置的屬性： - order: 定義項(xiàng)目的排列順序董栽。數(shù)值越小企孩，排列越靠前，默認(rèn)為0擒抛。
- flex-grow：定義項(xiàng)目的放大比例补疑，默認(rèn)為0，即如果存在剩余空間莲组，也不放大。如果所有項(xiàng)目的flex-grow屬性都為1撵孤，則它們將等分剩余空間（如果有的話）竭望。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1霞扬，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
- flex-shrink：定義了項(xiàng)目的縮小比例喻圃，默認(rèn)為1，即如果空間不足雀扶，該項(xiàng)目將縮小肆汹。如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)浪册，都將等比例縮小岗照。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1攒至，則空間不足時(shí)，前者不縮小库菲。
負(fù)值對(duì)該屬性無(wú)效志膀。 - flex-basis: length | auto; /* default auto */。定義了在分配多余空間之前奇颠，項(xiàng)目占據(jù)的主軸空間（main size）放航。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間荆几。它的默認(rèn)值為auto赊时，即項(xiàng)目的本來(lái)大小。它可以設(shè)為跟width或height屬性一樣的值（比如350px）祖秒，則項(xiàng)目將占據(jù)固定空間舟奠。
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]房维。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫咙俩，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選阿趁。
實(shí)現(xiàn)一個(gè)div水平垂直居中，方法一：使用定位來(lái)做皂股。方法二：使用flex布局處理（容器主軸方向垂直独撇，justify-content
為center)
不固定高度div垂直居中(非flex布局)
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>haorooms不固定高度div寫法</title>
<style>
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="center">不兼容ie8</div>
</body>