浮動(dòng)盒子(float)可以設(shè)置為向左或向右仑性,即一直向左或向右移動(dòng),直到碰到父級(jí)邊緣或另一個(gè)浮動(dòng)盒子。設(shè)置為浮動(dòng)的元素寬度會(huì)收縮為適應(yīng)其內(nèi)容的最小寬度,除非手動(dòng)設(shè)置寬度(width/min-width/max-width)瘤旨。
浮動(dòng)元素會(huì)脫離文檔流梯啤,不會(huì)影響其他元素竖伯,但是其他元素中的文本內(nèi)容會(huì)在排布時(shí)避開(kāi)浮動(dòng)元素,造成文本圍繞浮動(dòng)盒子的效果因宇,據(jù)說(shuō)這也是引入浮動(dòng)元素的初衷七婴。
想阻止其他元素包圍在浮動(dòng)元素周圍,需要添加clear屬性察滑。圖中圖片浮動(dòng)在右側(cè)打厘,粉色按鈕包圍浮動(dòng)元素導(dǎo)致箭頭不局中。
給粉色布局添加clear:right后贺辰,讓出了浮動(dòng)元素的位置户盯,箭頭居中。
需要注意的是的饲化,添加了clear后莽鸭,實(shí)際上是給粉色按鈕部分添加了一個(gè)上邊距,使其移動(dòng)到浮動(dòng)元素下方吃靠,這個(gè)時(shí)候如果想給粉色部分添加上邊距硫眨,除非給定的值超過(guò)了clear屬性帶來(lái)的值,否則沒(méi)什么效果巢块。
總結(jié)一下浮動(dòng)元素會(huì)導(dǎo)致后面的行盒子縮短礁阁,從而造成文本環(huán)繞效果,此外不會(huì)對(duì)周圍元素有任何影響族奢。
還有一種情況姥闭,假如我這里沒(méi)有數(shù)據(jù)了,更多按鈕也不顯示了(沒(méi)有清除浮動(dòng)效果了)越走,效果就會(huì)變成:
設(shè)置了浮動(dòng)的圖片脫離了文檔流棚品,包裹它的布局無(wú)法生成對(duì)應(yīng)的高度,此時(shí)由于沒(méi)有其他數(shù)據(jù),也無(wú)法使用clear來(lái)創(chuàng)造足夠的垂直外邊距作為浮動(dòng)元素的空間南片。
可以在布局里添加一個(gè)空標(biāo)簽掺涛,然后在空標(biāo)簽上清除浮動(dòng),不過(guò)這樣出現(xiàn)一個(gè)多余標(biāo)簽會(huì)逼死心靈潔癖疼进。
或者可以為添加偽元素解決:
.wrap:after{
content: '';
display: block;
clear: right;
}
可以模擬額外的清除元素薪缆,同時(shí)也不避免加額外的元素。
參考《精通CSS:高級(jí)Web標(biāo)準(zhǔn)解決方案》