一、浮動
1.用法
float:right、left、none、inherit --左浮動、右浮動、不浮動、繼承父元素浮動
2.特性:
使元素脫離標準流、文本自環繞、行內元素浮動後能夠進行寬、高、邊距等設置
3.副作用:元素塌陷
4.解決元素塌陷的方法
1)父元素和子元素一起浮動 --在父元素中也增加相應的浮動
2)給父元素設置寬高 --不會塌陷
3)溢出解決
.float{
overflow:hidden; /*auto也可以,auto將溢出部門滾動,hidden則是直接將溢出部分截取*/
zoom:1; /*IE專屬*/
}
4)清除浮動
在浮動子元素的下面加個盒子 <div class=".clear"></div>
.clear{
clear:both; /*指定不允許元素周圍有浮動元素 left、right、both、none、inherit*/
}
5)僞類處理
.floatElement ::after{
clear:both;
display:block;
visibility:hidden;
height:0;
}