知識(shí)點(diǎn)導(dǎo)航
* 浮動(dòng)的性質(zhì)
+ 脫標(biāo)
+ 貼邊
+ 字圍
+ 收縮
* 浮動(dòng)的清除
+ 方法一：給浮動(dòng)元素的祖先元素加高度
+ 方法二：clear: both;
+ 方法三：隔墻法
+ 方法四：overflow: hidden;
* margin
+ margin 的塌陷現(xiàn)象
+ margin: 0 auto; (居中)
+ margin IE6兼容問(wèn)題
+ 善用父親的padding,而不是兒子的margin
浮動(dòng)<p>
浮動(dòng)是css里面布局用的最多的屬性
下面兩個(gè)元素并排并且可以設(shè)置寬高历极，這在標(biāo)準(zhǔn)流中是實(shí)現(xiàn)不了的
要想學(xué)好 css ,一定要知道以下幾個(gè)性質(zhì)：
浮動(dòng)的元素脫標(biāo)<p>
一個(gè)浮動(dòng)的 span 標(biāo)簽不需要轉(zhuǎn)成塊級(jí)元素就能設(shè)置寬高，換句話說(shuō)也就是偶垮，一旦一個(gè)元素浮動(dòng)了，那么它將能夠并排帝洪，能夠設(shè)置寬高，它將不再是塊級(jí)元素或者行內(nèi)元素脚猾，也就是所謂的脫離標(biāo)準(zhǔn)流
浮動(dòng)的元素互相貼靠<p>
如上如所示：
如果有足夠的空間葱峡，那么 3 就會(huì)靠著 2 哥；如果沒(méi)有足夠的空間龙助，那么會(huì)靠著 1 號(hào)大哥砰奕；如果沒(méi)有足夠的空間靠著 1 號(hào)大哥蛛芥，那么自己就會(huì)去貼左墻
浮動(dòng)元素有 “字圍” 效果<p>
浮動(dòng)盡量要遵守一個(gè)原則：
浮動(dòng)都是一起浮動(dòng)，永遠(yuǎn)不是一個(gè)東西單獨(dú)浮動(dòng)
浮動(dòng)的清除<p>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
<style type="text/css">
li {
float:left;
}
</style>
問(wèn)題：本來(lái)以為上面中的 li 會(huì)分為兩排军援，但是第二組中的第一個(gè) li 去貼靠第一組中的最后一個(gè) li 了
原因就是 div 沒(méi)有高度仅淑，不能給自己浮動(dòng)的子標(biāo)簽一個(gè)容器
清除浮動(dòng)方法一：給浮動(dòng)元素的祖先元素加高度（用的少）<p>
如果一個(gè)元素要浮動(dòng)，那么它的祖先元素一定要有高度胸哥，有高度的盒子才能 關(guān)住浮動(dòng)
只要浮動(dòng)在一個(gè)有高度的盒子中涯竟，那個(gè)這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素，因此就清除了浮動(dòng)帶來(lái)的影響
清除浮動(dòng)方法二：clear: both;<p>
網(wǎng)頁(yè)制作中空厌，高度 height 很少出現(xiàn)庐船，因?yàn)槟鼙粌?nèi)容撐高，所以方法一用的很少
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="box2"> //給這個(gè) div 寫一個(gè) clear:both; 屬性
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
<style type="text/css">
.box2 {
clear: both;
}
</style>
clear 為清除嘲更，both 指的是 左浮動(dòng) 和 有浮動(dòng)筐钟，完整的意思就是 清除別人對(duì)我的影響
致命問(wèn)題：margin 失效了
清除浮動(dòng)方法三：隔墻法<p>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="cl h16"></div> //中間加面墻
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
<style type="text/css">
cl {
clear: both;
}
h16 {
height: 16px;
}
</style>
近些年，又演化出了 “內(nèi)墻法”
清除浮動(dòng)方法四：overflow: hidden;<p>
overflow: hidden 表示溢出隱藏赋朦，即溢出邊框的內(nèi)容篓冲，都要隱藏掉
一個(gè)父元素不能被自己浮動(dòng)的子元素?fù)纬龈叨瘸韬澹侵灰o父元素加上 overflow: hidden; 那么父元素就能被子元素?fù)纬龈叨龋ú⑶?margin 能正常設(shè)置）壹将。！Ａ詹Α瞭恰！ 這是一個(gè)偏方
瀏覽器兼容問(wèn)題<p>
1. 微型盒子問(wèn)題
IE6不支持小于 12px 的盒子，任何小于 12px 的盒子狱庇，在 IE6 中看著都比較大惊畏。解決方法：
height: 4px;
font-size: 0px; //增加這一行
設(shè)置盒子的字號(hào)小于盒子的高度即可
瀏覽器 hack
就是使用瀏覽器提供的后門，針對(duì)某一種瀏覽器做兼容密任。比如颜启，IE6就留了一個(gè)后門，只要在CSS屬性之前加上下劃線浪讳，這個(gè)屬性就是IE6的專有屬性
所以缰盏，解決微型盒子的正確寫法是：
height: 10px;
_font-size: 0; //加下劃線表示IE6專屬
2. IE6不支持overflow: hidden;來(lái)清除浮動(dòng)<p>
overflow: hidden;的本意是溢出盒子border的東西要隱藏，這個(gè)功能IE6是兼容的淹遵；不兼容的是使用overflow: hidden; 來(lái)清除浮動(dòng)口猜。解決方法：
overflow: hidden;
_zoom: 1;
原因是 _zoom: 1; 能夠出發(fā)了瀏覽器的 hasLayout 機(jī)制
以上兩個(gè)IE6 的兼容問(wèn)題都是通過(guò)多寫一條 hack 來(lái)解決的，這個(gè)被稱為伴生屬性透揣。
margin<p>
1. margin 額塌陷現(xiàn)象
標(biāo)準(zhǔn)文檔流中济炎，豎直方向 的 margin 不疊加，以較大的為準(zhǔn)辐真。
如果不在標(biāo)準(zhǔn)流中须尚，兩個(gè)盒子之間是沒(méi)有塌陷現(xiàn)象的
2. 盒子居中 margin: 0 auto;<p>
margin 的值可以為 auto崖堤，表示自動(dòng)。當(dāng)left耐床、right兩個(gè)方向都是 auto 的時(shí)候密幔，盒子居中了：
margin-left: auto;
margin-right: auto;
簡(jiǎn)寫為：
margin: 0 auto;
注意：
1. 使用 margin: 0 auto; 的盒子，必須有明確的 width
2. 只有標(biāo)準(zhǔn)流的盒子撩轰，才能使用 margin: 0 auto; 居中胯甩。也就是說(shuō)，當(dāng)一個(gè)盒子浮動(dòng)了钧敞，絕對(duì)定位了蜡豹，固定定位了，都不能使用 margin: 0 auto;
3. margin: 0 auto; 是在居中盒子溉苛，不是居中文本镜廉。文本的居中要使用 text-align: center;
3. 善用父元素的 padding，而不是子元素的 margin<p>
如果父元素沒(méi)有 border愚战，那么子元素的 margin 實(shí)際上踹的是 “流”娇唯，踹的是這 “行 ”，所以父元素整體也掉下來(lái)了
margin 這個(gè)屬性寂玲，本質(zhì)上描述的是兄弟和兄弟之間的距離塔插；最好不要用這個(gè) margin 表達(dá)父子之間的距離。因此要善用父元素的 padding 而不是 子元素的 margin拓哟。
4. 關(guān)于 margin 的IE6兼容問(wèn)題<p>
IE6 的雙倍 margin bug<p>
當(dāng)出現(xiàn)連續(xù)浮動(dòng)的元素想许，攜帶和浮動(dòng)方向相同的 margin 時(shí)，隊(duì)首的元素會(huì)雙倍 margin断序。
解決方案：
第一種：使浮動(dòng)的方向和 margin 的方向相反
float: left;
margin-right: 40px;
第二種：?jiǎn)为?dú)給隊(duì)首的元素寫一半的 margin
<li class="no1"></li>
ul li.no1 {
_margin-left: 20px;
}
IE6的 3px bug<p>
解決方案：
代碼寫的不規(guī)范流纹，重新寫，哈哈哈ＮナＪ！善用父元素的padding
