WEB前端-float浮動(dòng)
時(shí)間:2023-09-28 02:30:01 | 來源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-09-28 02:30:01 來源:網(wǎng)站運(yùn)營(yíng)
WEB前端-float浮動(dòng):
一、普通流(標(biāo)準(zhǔn)流):默認(rèn)狀態(tài),元素自動(dòng)從左往右,從上往下的排列。
1、塊元素:div、p、h1~h6、ul、ol、li、dl、dt、dd
- 獨(dú)占一行
- 可以設(shè)置寬、高
- 如果不設(shè)置寬度,寬度默認(rèn)為容器的100%
2、行內(nèi)元素:span、a、b、i、u、em....
- 與其它元素同行顯示
- 不可以設(shè)置寬、高
- 寬高就是文字或圖片的寬高
二、浮動(dòng)
1、概念- 會(huì)使元素向左或向右移動(dòng),只能左右,不能上下。
- 浮動(dòng)元素碰到包含框或另一個(gè)浮動(dòng)框,浮動(dòng)停止。
- 浮動(dòng)元素之后的元素將圍繞它,之前的不受影響。
- 浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流。
2、語法- float:left 靠左浮動(dòng)
- float:right 靠右浮動(dòng)
- float:none 不使用浮動(dòng)
三、清除浮動(dòng)(閉合浮動(dòng))
1、語法clear : none | left | right | both
- clear:left 左側(cè)抗浮動(dòng),只影響自身,不影響其他相鄰元素
- clear:right 右側(cè)抗浮動(dòng),只影響自身,不影響其他相鄰元素
- clear:both 左右兩側(cè)抗浮動(dòng),只影響自身,不影響其他相鄰元素
2、常用方法- 在浮動(dòng)元素后使用一個(gè)空元素,如:
<div class= "clear"></div>
overflow:hidden; *zoom:1; /*觸發(fā) hasLayout兼容IE 6、7*/
.clearfix:after{ content"."; display: block; height:0; visibility: hidden; clear:both; } .clearfix { *zoom: 1; /* 觸發(fā)hasLayout兼容IE 6、7*/ }
3、其他方法- 父級(jí)元素定義height。只適合高度固定的布局。
- 父級(jí)元素也一起浮動(dòng)。不推薦,會(huì)產(chǎn)生新的浮動(dòng)問題。