塊元素在文檔流中默認垂直排列，所以多個div從上至下依次排開

如果希望塊元素在頁面中水平排列，可以使用float來使元素浮動，從而脫離文檔流,元素脫離文檔流以后，它下邊的元素會立即向上移動

css浮動的特性

1.浮動的元素不會蓋住文字，文字會自動環(huán)繞在浮動元素的周圍

2.元素浮動以后，會盡量向頁面的左上或這是右上漂浮,直到遇到父元素的邊框或者其他的浮動元素

3.如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素

4.浮動的元素永遠不會超過他上邊的兄弟元素,最多一邊擠

5.塊元素脫離文檔流以后,默認的高度和寬度都丟失.高寬會被內(nèi)容撐開(不再是默認的占父元素100%)(這是脫離文檔流的特點,不僅僅是浮動才會這樣)

6.內(nèi)聯(lián)元素脫離文檔流后,會變成塊元素(所有元素一旦脫離文檔流.全都會變成塊元素)

box1左浮動 box2左浮動 box3右浮動(為什么不到右上角?)

浮動的影響與清除浮動

在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。

但是子元素浮動后,因為脫離了文檔流,所以子元素無法撐起父元素的高度.導致父元素高度消失.后面的元素都將會向上移動.最終導致頁面布局混亂。

清除浮動方法1(針對父子元素)：

給父元素指定一個高度直接寫死(不推薦)

清除浮動方法2(針對父子元素)：

給父元素開啟BFC。

清除浮動方法3:清除浮動clear(針對兄弟元素)

clear可以用來清除其他浮動元素對當前元素的影響,僅僅是清除影響,清除浮動后.元素會回到其他元素浮動之前的位置

如果前面的元素是左浮動:clear:left

如果前面的元素是右浮動:clear:right

| 值 | 描述 |

| left | 在左側不允許浮動元素。 |

| right | 在右側不允許浮動元素。 |

| both | 在左右兩側均不允許浮動元素。(清除對元素影響最大的那個元素浮動) |

| none | 默認值。允許浮動元素出現(xiàn)在兩側。 |

| inherit | 規(guī)定應該從父元素繼承 clear 屬性的值。 |

清除浮動導致高度塌陷問題(父子元素)：

可以直接在高度塌陷的父元素的最后，添加一個空白的div,并設置clear

但是此方法會添加冗余代碼.因此可使用css進行添加偽元素:

.父元素:after{content:"";display:block;clear:both;} 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的css为什么要用浮动_css浮动的特性，与浮动带来的影响以及如何清除浮动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。