CSS:浮動(dòng)

浮動(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)致箭頭不局中。


1.png

給粉色布局添加clear:right后贺辰,讓出了浮動(dòng)元素的位置户盯,箭頭居中。


2.png

需要注意的是的饲化,添加了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ì)變成:


3.png

設(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í)也不避免加額外的元素。


image.png

參考《精通CSS:高級(jí)Web標(biāo)準(zhǔn)解決方案》

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末伞广,一起剝皮案震驚了整個(gè)濱河市拣帽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嚼锄,老刑警劉巖减拭,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異区丑,居然都是意外死亡拧粪,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)沧侥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)可霎,“玉大人,你說(shuō)我怎么就攤上這事宴杀⊙⒗剩” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵旺罢,是天一觀的道長(zhǎng)旷余。 經(jīng)常有香客問(wèn)我,道長(zhǎng)扁达,這世上最難降的妖魔是什么正卧? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮罩驻,結(jié)果婚禮上穗酥,老公的妹妹穿的比我還像新娘。我一直安慰自己惠遏,他們只是感情好砾跃,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著节吮,像睡著了一般抽高。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上透绩,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天翘骂,我揣著相機(jī)與錄音壁熄,去河邊找鬼。 笑死碳竟,一個(gè)胖子當(dāng)著我的面吹牛草丧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播莹桅,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼昌执,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了诈泼?” 一聲冷哼從身側(cè)響起懂拾,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎铐达,沒(méi)想到半個(gè)月后岖赋,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓮孙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年唐断,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衷畦。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡栗涂,死狀恐怖知牌,靈堂內(nèi)的尸體忽然破棺而出祈争,到底是詐尸還是另有隱情,我是刑警寧澤角寸,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布菩混,位于F島的核電站,受9級(jí)特大地震影響扁藕,放射性物質(zhì)發(fā)生泄漏沮峡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一亿柑、第九天 我趴在偏房一處隱蔽的房頂上張望邢疙。 院中可真熱鬧,春花似錦望薄、人聲如沸疟游。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)颁虐。三九已至,卻和暖如春卧须,著一層夾襖步出監(jiān)牢的瞬間另绩,已是汗流浹背儒陨。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留笋籽,地道東北人蹦漠。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像车海,于是被迫代替她去往敵國(guó)和親津辩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 浮動(dòng)元素有什么特征容劳?對(duì)父容器喘沿、其他浮動(dòng)元素、普通元素竭贩、文字分別有什么影響? 浮動(dòng)元素脫離文檔流蚜印,當(dāng)一個(gè)元素設(shè)置成浮...
    小囧兔閱讀 237評(píng)論 0 0
  • 1. 浮動(dòng)元素有什么特征?對(duì)父容器留量、其他浮動(dòng)元素窄赋、普通元素、文字分別有什么影響? 浮動(dòng)元素會(huì)脫離文檔流楼熄,不占據(jù)原來(lái)...
    饑人谷_Jack閱讀 649評(píng)論 0 1
  • 自我總結(jié): 浮動(dòng)是實(shí)現(xiàn)布局的一種常見(jiàn)方式 浮動(dòng)脫離普通文檔流可岂,即頁(yè)面渲染時(shí)错敢,盒模型按標(biāo)準(zhǔn)會(huì)將父元素所設(shè)置的屬性將頁(yè)...
    饑人谷_遠(yuǎn)方閱讀 419評(píng)論 0 0
  • 浮動(dòng)元素的特征 元素在浮動(dòng)后不會(huì)獨(dú)占一行。 元素在浮動(dòng)后會(huì)脫離文檔流 行內(nèi)元素在浮動(dòng)后會(huì)可以設(shè)置寬和高 1.在父元...
    趙BW閱讀 239評(píng)論 0 0
  • 我是黑夜里大雨紛飛的人啊 1 “又到一年六月缕粹,有人笑有人哭稚茅,有人歡樂(lè)有人憂愁,有人驚喜有人失落平斩,有的覺(jué)得收獲滿滿有...
    陌忘宇閱讀 8,547評(píng)論 28 53