網(wǎng)站制作NEWS
浮動(dòng)盒子的理解
除了塊盒和行盒，還有一種盒子，就是行塊盒(display:inline-block)，這種盒子結(jié)合了行盒和塊盒的特點(diǎn)，它既有行盒的不獨(dú)占一行，也有塊盒的可以設(shè)置寬高，按理說(shuō)這種盒子應(yīng)該很受歡迎，但在實(shí)際開(kāi)發(fā)中，我好像沒(méi)怎么用過(guò)，具體原因，下面說(shuō)。
浮動(dòng)盒子(float:left/right)
float:left 左浮動(dòng)， 元素靠左靠上； float:right 右浮動(dòng) ，元素靠右靠上。當(dāng)一個(gè)元素浮動(dòng)后，這個(gè)元素就會(huì)默認(rèn)被改改成了塊盒，但是卻有行塊盒的特點(diǎn)，可以修改寬高，可以不獨(dú)占一行，那為啥開(kāi)發(fā)者不直接改成行塊盒，恕我才疏學(xué)淺，不太明白，當(dāng)然，浮動(dòng)盒子和行塊盒還是有區(qū)別的，兩個(gè)行塊盒靠在一起，總有縫隙，然而兩個(gè)浮動(dòng)盒子靠在一起很顯然沒(méi)有，所以我只需要調(diào)節(jié)外邊距，或者內(nèi)邊距就能達(dá)到我想要的效果，所以在實(shí)際開(kāi)發(fā)中，我會(huì)盡可能的選擇浮動(dòng)盒子，更傾向于浮動(dòng)盒子。
浮動(dòng)盒子會(huì)與常規(guī)流盒子發(fā)生沖突，浮動(dòng)盒子會(huì)去主動(dòng)避開(kāi)常規(guī)流塊盒，但是不會(huì)避開(kāi)常規(guī)流行盒，同樣常規(guī)流塊盒遇到浮動(dòng)盒子，會(huì)無(wú)視浮動(dòng)盒子。
文字環(huán)繞，文字環(huán)繞的效果其實(shí)就是使元素浮動(dòng)起來(lái)的效果，我一開(kāi)始百思不得其解，后來(lái)查閱資料看到這么一句話豁然，使用浮動(dòng)盒子脫離文檔流，其他盒子會(huì)無(wú)視這個(gè)元素，但是其文本依然會(huì)為這個(gè)元素讓位置，這句話解開(kāi)了文字環(huán)繞的問(wèn)題
使用浮動(dòng)盒子繞不開(kāi)的一個(gè)問(wèn)題，就是高度坍塌，當(dāng)然如果你喜歡一開(kāi)始就給父元素設(shè)置好了高度，你就當(dāng)我沒(méi)說(shuō)，高度坍塌的根源就是：常規(guī)流盒子在計(jì)算高度時(shí)，是不會(huì)計(jì)算浮動(dòng)盒子的高度，所以常常會(huì)出現(xiàn)，你已經(jīng)寫(xiě)好了內(nèi)容，怎么顯示不出的問(wèn)題，這時(shí)候就要考慮一下是不是高度坍塌的問(wèn)題了。解決高度坍塌有好幾種方法，我在實(shí)際操作中更喜歡清除浮動(dòng)的辦法，先給父元素加個(gè)類(lèi)名 clearfix .clearfix::after{content:''; display:'block';clear:'both'} 這是什么意思呢，就是在父元素后面加一個(gè)沒(méi)有寬高的塊盒，沒(méi)有內(nèi)容，并清除左右浮動(dòng)，這是一個(gè)非常好的辦法。
多重隨機(jī)標(biāo)簽