浮動的初體驗(yàn)
問題：在頁面上有兩個盒子，一個盒子靠著屏幕左側(cè)顯示另一個盒子靠著屏幕的右側(cè)顯示？
作用：解決一行中顯示多個盒子的問題（并且這些盒子的位置可控。）
浮動的代碼：
float:left;
float:right;
浮動的特點(diǎn)
標(biāo)準(zhǔn)流：就是瀏覽默認(rèn)擺放盒子的標(biāo)準(zhǔn)。
==浮動的元素會脫離標(biāo)準(zhǔn)流==：
==如果一個元素按照正常的標(biāo)準(zhǔn)流來顯示，會在html中所屬的位置占位，后面的元素會緊跟著它。==但是浮動脫了標(biāo)準(zhǔn)流，將來在看到浮動的元素之后，不能以正常的標(biāo)準(zhǔn)流來進(jìn)行判斷。（在標(biāo)準(zhǔn)流中不占位置了，它是在標(biāo)準(zhǔn)流之上）
浮動以后的元素會覆蓋在標(biāo)準(zhǔn)流的元素之上。
浮動規(guī)則：浮動找浮動，不浮動找不浮動
浮動找浮動：只有寫在同一個結(jié)構(gòu)下面的浮動才會浮動找浮動。
浮動顯示的位置與原本不浮動之前的位置是對應(yīng)的：
浮動的重點(diǎn)：==********浮動的元素只會影響下面的元素，不會影響上面的元素********==：
浮動的元素會改變顯示方式：
不管元素是行內(nèi)元素還是塊級元素將來在顯示 的時候都會在同一行中顯示。
浮動以后的元素可以設(shè)置寬高。
==總結(jié)：浮動以后的元素的顯示方式與行內(nèi)塊級元素一樣。==
浮動的案例：
1.0使用浮動完成頁面的布局
2.0制作導(dǎo)航
注意：以后使用a標(biāo)簽直接來制作導(dǎo)航是有問題的
1.0導(dǎo)航與導(dǎo)航之間應(yīng)該是列表的關(guān)系，所以如果想要將這個些關(guān)系通過html語義化表示出來必須要用到ul標(biāo)簽。
2.0如果這些a標(biāo)簽?zāi)悴挥闷渌臉?biāo)簽包裹起來，那么將來瀏覽器會將這些a標(biāo)簽中的文字當(dāng)作全部一起顯示。SEO在查
看頁面的時候會認(rèn)為這個頁面進(jìn)行作弊，就是進(jìn)行了關(guān)鍵字的堆砌。
必須要用ul中的li標(biāo)簽將a中的內(nèi)容包裹起來。
3.0文字環(huán)繞圖片
清除浮動
浮動對頁面的影響：
如果一個父盒子中有一個子盒子，并且父盒子沒有設(shè)置高，子盒子在父盒子中進(jìn)行了浮動，那么將來父盒子的高度為0.由于父盒子的高度為0，下面的元素會自動補(bǔ)位，所以這個時候要進(jìn)行浮動的清除。
float: left;float: right;
清除浮動：clear:both;
使用額外標(biāo)簽法：
在浮動的盒子之下再放一個標(biāo)簽，在這個標(biāo)簽中使用clear:both，來清除浮動對頁面的影響。
內(nèi)部標(biāo)簽：在浮動盒子的下邊加一個空盒子。
會將這個浮動盒子的父盒子高度重新?lián)伍_
外部標(biāo)簽：在浮動盒子的父級的下邊加一個空盒子。
會將這個浮動盒子的影響清除，但是不會撐開父盒子。
注意：一般情況下不會使用這一種方式來清除浮動。因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽。
使用overflow屬性來清除浮動：
先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響。
注意：一般情況下也不會使用這種方式，因?yàn)閛verflow:hidden有一個特點(diǎn)，離開了這個元素所在的區(qū)域以后會被隱藏（
使用偽元素來清除浮動：
.clearfix:after {
content: "";//添加內(nèi)容為空
height: 0;//內(nèi)容高度為0
line-height: 0;//內(nèi)容文本的高度為0
display: block;//將文本設(shè)置為塊級元素
clear: both;//清除浮動
visibility: hidden;//將元素隱藏
}
.clearfix {
zoom: 1;/為了兼容ie6/
}
使用雙偽元素清除浮動：
偽元素：在頁面上不存在的元素，但是可以通過css來添加上去。
種類：
:after（在。。。之后）
:before（在。。。之前）
注意：每個元素都有自己的偽元素。
overflow:溢出
取值：
hidden：會將超出容器的部分隱藏起來
scroll：給容器加上滾動條（==使用時注意設(shè)置內(nèi)容高度，這樣才能滾動起來。）==
auto：根據(jù)具體情況判斷容器是否要加上滾動條
元素的隱藏：
overflow:hidden//將超出的部分裁剪掉
==visibility: hidden==//可以將元素隱藏，但是在頁面上還保留著原來的位置。（停薪留職）
==display: none==;//可以將元素隱藏，并且在頁面不占據(jù)位置。
diplay:none與display:block是一對反義詞。
