浮動(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)解決方案》
