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