float帶來的問題
1.float: right 右浮動(dòng)時(shí)绸狐，靠右換行（錯(cuò)行）的解決方法
描述：當(dāng)非float的元素和float的元素在一起的時(shí)候宵蕉，如果非float元素在先，那么float的元素將被排斥。把右浮動(dòng)的標(biāo)簽放在正常標(biāo)簽的前面即可宋税。
<div class="banner">
<div class="no-float"></div>
<div class="foat-r"></div>
</div>
解決：把右浮動(dòng)的標(biāo)簽放在正常標(biāo)簽的前面即可。
<div class="banner">
<div class="foat-r"></div>
<div class="no-float"></div>
</div>
2.浮動(dòng)造成換行問題
描述：例子如：兩個(gè)div設(shè)置了左浮動(dòng)讼油，想第三個(gè)div換行
（如果第三個(gè)也是左浮動(dòng)杰赛，則寬度小于父元素剩余寬度的話，就不會(huì)換行汁讼；如果第三不是浮動(dòng)等特殊情況淆攻，會(huì)覆蓋第一個(gè)div位置，但文字不會(huì)覆蓋而是環(huán)繞）
解決：給第三div設(shè)置style="clear:both"
3.浮動(dòng)會(huì)造成 父元素塌陷 問題嘿架。
如果一個(gè)父元素的所有子元素都是浮動(dòng)的瓶珊，子元素的浮動(dòng)確定了自身位置，盡管子元素有高度耸彪，但是不會(huì)影響到父元素的高度伞芹，那么這個(gè)父元素高度就是0（若沒有指的寬度，就是父元素寬度）蝉娜。如果想要父元素內(nèi)的浮動(dòng)元素占有父元素的高度唱较，就需要清除浮動(dòng)。
解決方法：
.parent:after {
content: " ";
display: block;
clear: both;
}
還有兩種不推薦的解決方法：
- 在具有浮動(dòng)元素的父容器中置“overflow”的屬性值為“hidden”
- 父容器設(shè)置position：absolute
- 在容器的結(jié)束標(biāo)簽前添加一個(gè)空的div召川，在空div上直接設(shè)置樣式“clear:both”
參考
