浮動的初體驗(yàn)
問題：在頁面上有兩個(gè)盒子柱恤，一個(gè)盒子靠著屏幕左側(cè)顯示另一個(gè)盒子靠著屏幕的右側(cè)顯示肤频？
作用：解決一行中顯示多個(gè)盒子的問題（并且這些盒子的位置可控氓扛。）
浮動的代碼：
float:left;
float:right;
浮動的特點(diǎn)
標(biāo)準(zhǔn)流：就是瀏覽默認(rèn)擺放盒子的標(biāo)準(zhǔn)击喂。
==浮動的元素會脫離標(biāo)準(zhǔn)流==：
==如果一個(gè)元素按照正常的標(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ī)則：浮動找浮動铲敛，不浮動找不浮動
浮動找浮動：只有寫在同一個(gè)結(jié)構(gòu)下面的浮動才會浮動找浮動褐澎。
浮動顯示的位置與原本不浮動之前的位置是對應(yīng)的：
浮動的重點(diǎn)：==********浮動的元素只會影響下面的元素，不會影響上面的元素********==：
浮動的元素會改變顯示方式：
不管元素是行內(nèi)元素還是塊級元素將來在顯示 的時(shí)候都會在同一行中顯示伐蒋。
浮動以后的元素可以設(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)系先鱼，所以如果想要將這個(gè)些關(guān)系通過html語義化表示出來必須要用到ul標(biāo)簽徒蟆。
2.0如果這些a標(biāo)簽?zāi)悴挥闷渌臉?biāo)簽包裹起來，那么將來瀏覽器會將這些a標(biāo)簽中的文字當(dāng)作全部一起顯示型型。SEO在查
看頁面的時(shí)候會認(rèn)為這個(gè)頁面進(jìn)行作弊段审，就是進(jìn)行了關(guān)鍵字的堆砌。
必須要用ul中的li標(biāo)簽將a中的內(nèi)容包裹起來。
3.0文字環(huán)繞圖片
清除浮動
浮動對頁面的影響：
如果一個(gè)父盒子中有一個(gè)子盒子寺枉，并且父盒子沒有設(shè)置高抑淫，子盒子在父盒子中進(jìn)行了浮動，那么將來父盒子的高度為0.由于父盒子的高度為0姥闪，下面的元素會自動補(bǔ)位始苇，所以這個(gè)時(shí)候要進(jìn)行浮動的清除。
float: left;float: right;
清除浮動：clear:both;
使用額外標(biāo)簽法：
在浮動的盒子之下再放一個(gè)標(biāo)簽筐喳，在這個(gè)標(biāo)簽中使用clear:both催式，來清除浮動對頁面的影響。
內(nèi)部標(biāo)簽：在浮動盒子的下邊加一個(gè)空盒子避归。
會將這個(gè)浮動盒子的父盒子高度重新?lián)伍_
外部標(biāo)簽：在浮動盒子的父級的下邊加一個(gè)空盒子荣月。
會將這個(gè)浮動盒子的影響清除，但是不會撐開父盒子梳毙。
注意：一般情況下不會使用這一種方式來清除浮動哺窄。因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽。
使用overflow屬性來清除浮動：
先找到浮動盒子的父元素账锹，再在父元素中添加一個(gè)屬性：overflow:hidden,就是清除這個(gè)父元素中的子元素浮動對頁面的影響萌业。
注意：一般情況下也不會使用這種方式，因?yàn)閛verflow:hidden有一個(gè)特點(diǎn)奸柬，離開了這個(gè)元素所在的區(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（在懂从。授段。蹲蒲。之前）
注意：每個(gè)元素都有自己的偽元素番甩。
overflow:溢出
取值：
hidden：會將超出容器的部分隱藏起來
scroll：給容器加上滾動條（==使用時(shí)注意設(shè)置內(nèi)容高度，這樣才能滾動起來届搁。）==
auto：根據(jù)具體情況判斷容器是否要加上滾動條
元素的隱藏：
overflow:hidden//將超出的部分裁剪掉
==visibility: hidden==//可以將元素隱藏缘薛，但是在頁面上還保留著原來的位置。（停薪留職）
==display: none==;//可以將元素隱藏卡睦，并且在頁面不占據(jù)位置宴胧。
diplay:none與display:block是一對反義詞。
