一.浮動（float）
塊元素在文檔流中默認(rèn)垂直排列棘钞，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流干毅。可以使用float來使元素浮動宜猜，從而脫離文檔流。
可選值：
none硝逢，默認(rèn)值姨拥，元素默認(rèn)在文檔流中排列
left，元素會立即脫離文檔流渠鸽，向頁面的左側(cè)浮動
right叫乌，元素會立即脫離文檔流，向頁面的右側(cè)浮動
1.當(dāng)為一個元素設(shè)置浮動以后（float屬性是一個非none的值）徽缚，元素會立即脫離文檔流憨奸，元素脫離文檔流以后，它下面的元素會立即向上移動猎拨。
2.元素浮動以后膀藐，會盡量向頁面的左上或右上漂浮，直到遇到遇到父元素的邊框或者其他的浮動元素红省。
3.如果浮動元素上邊是一個沒有浮動的塊元素额各，則浮動元素不會超過塊元素。
4.浮動的元素不會超過他的兄弟元素吧恃，最多最多一邊齊虾啦。
5.浮動元素不會蓋住文字，文字會自動環(huán)繞在浮動元素的周圍痕寓，所以我們可以通過設(shè)置文字環(huán)繞圖片小果傲醉。
6.當(dāng)元素設(shè)置浮動以后，會完全脫離文檔流呻率，塊元素脫離文檔流以后硬毕，高度和寬度都會被內(nèi)容撐開。
7.開啟span的浮動礼仗，內(nèi)聯(lián)元素脫離文檔流以后會變成塊元素吐咳。
二.清除浮動（clear）
由于受到box1浮動的影響，box2整體向上移動了100px元践，我們有時希望清除掉其他元素浮動對當(dāng)前元素產(chǎn)生的影響韭脊，這是可以使用clear來完成功能。clear可以用來清除其他浮動元素對當(dāng)前元素的影響单旁。
可選值：
none：默認(rèn)值沪羔，不清除浮動
left：清除左側(cè)浮動元素對當(dāng)前元素的影響
right：清除右側(cè)浮動元素對當(dāng)前元素的影響
both：清除兩側(cè)浮動元素對當(dāng)前元素的影響（例如解決高度塌陷的問題）
三.簡單布局
1.自動布局
通過之前box的學(xué)習(xí)、邊距以及一些文檔流和float的學(xué)習(xí)象浑，可以做一個簡單的web布局
2.自適應(yīng)布局
這個= =emm蔫饰，道行不深琅豆，日后在學(xué)！
四.高度塌陷問題
在文檔流中篓吁，父元素的高度默認(rèn)是被子元素?fù)伍_的趋距，也就是子元素越多，父元素越高越除。但是當(dāng)為子元素設(shè)置浮動以后需节腐，子元素會完全脫離文檔流，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度摘盆，導(dǎo)致父元素的高度塌陷翼雀。由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動孩擂，這樣將會導(dǎo)致頁面布局混亂狼渊。
所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題
我們可以將父元素的高度寫死，以避免塌陷的問題出現(xiàn)类垦，但是一旦寫死狈邑，父元素的高度將不能自動適應(yīng)子元素的高度，所以這種方案是不推薦使用的蚤认。
根據(jù)W3C的標(biāo)準(zhǔn)米苹，在頁面中元素都有一個隱含的屬性叫做Block Formatting Context，簡稱BFC砰琢。
該屬性可以設(shè)置打開或關(guān)閉蘸嘶，默認(rèn)是關(guān)閉的。
當(dāng)開啟元素的BFC以后陪汽，元素將會具有如下的特性：
1.父元素的外邊距不會和子元素重疊
2.開啟BFC的元素不會被下面的元素所覆蓋
3.開啟BFC的元素可以包含浮動的子元素
如何開啟元素的BFC
1.設(shè)置元素浮動
使用這種方式開啟训唱，雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失挚冤，而且使用這種方式也會導(dǎo)致下邊的元素上移况增，不能解決問題
2.設(shè)置元素絕對定位
3.設(shè)置元素的display：inline-block
可以解決問題训挡，但是也是會導(dǎo)致寬度丟失澳骤，不推薦使用這種方式。
4.將元素的overflow設(shè)置為一個非visible的值
推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式舍哄。
說了半天宴凉，總結(jié)一下就是誊锭，當(dāng)出現(xiàn)高度塌陷問題的時候表悬，在父元素加一個overflow：hidden的來解決。
另外說一下這個overflow兼容問題丧靡，在IE6及以下的瀏覽器中不支持BFC蟆沫，所以使用這種方式不能兼容IE6籽暇。在IE6中雖然沒有BFC，但是具有另一個隱含的屬性叫hasLayout饭庞，該屬性的作用和BFC類似戒悠，所在IE6瀏覽器可以通過開hasLayout來解決這個問題。
開啟的方式很多舟山，我們直接使用一種副作用最小的：
直接將元素的zoom設(shè)置為1即可绸狐。（zoom：1；）
zoom表示放大的意思累盗，后邊跟著一個數(shù)值寒矿，寫幾就將元素放大幾倍。
zoom：1 若债；表示不放大元素符相，但是通過該樣式可以開啟hasLayout
zoom這個樣式，只在IE中支持蠢琳，其他瀏覽器不支持啊终。
好了，不要理這個zoom了傲须。蓝牲。。學(xué)了半天泰讽，不支持其他瀏覽器搞旭。
5.解決高度塌陷方案五(使用增加空白div清除浮動clear)：
可以直接在高度塌陷的父元素的最后，添加一個空白div菇绵，由于這個div并沒有浮動肄渗，所以他是可以撐開父元素的高度的，然后再對其進行清除浮動clear咬最，這樣可以通過這個空白的div來撐開父元素的告訴翎嫡，基本沒有副作用。
使用這種方式雖然可以解決問題，但是會在頁面中添加多余 的結(jié)構(gòu).
6.通過after偽類翅雏，直接在父元素后面添加一個內(nèi)容
可以通過after偽類向元素的最后添加一個空白的塊元素圈驼，然后對其清除浮動，這樣做和添加一個div的原理一樣望几，可以達到一個相同的效果绩脆。
而且不會在頁面中添加多余的div，這是我們最推薦使用的方式，幾乎沒有副作用靴迫。
五.導(dǎo)航條練習(xí)
