float —— 中文意思 浮動，當然就有往左浮動，往右浮動。這就是 float 的兩個最基本的屬性:

• left

• right

在這里，我們分別設置兩個圖標的 CSS 如下：

.logo {float: left; } ? .avatar {float: right; }

在什么時候需要使用 float 呢？主要使用場景有兩種：

如果我們想要一組元素同時靠左靠右對齊，可以使用 float，正如上面案例一樣

如果我們想要文字圍繞圖片，可以使用 float，這個大家先了解下，后面用到，我們會具體講到。

浮動坍塌

如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候，那么它的高度就會踏縮為零。這是因為浮動元素脫離了文檔流，包圍它們的父塊中沒有內容了，所以“”塌陷“”了。

方法一：使用帶clear屬性的空元素 鑒第47個知識點

方法二：使用CSS的overflow屬性

方法三：給浮動元素的容器添加浮動

方法四：使用CSS的:after偽元素

總結

以上是生活随笔為你收集整理的float及float浮动坍塌问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。