給前面乙個父元素設定高度
給後面的盒子新增clear屬性
隔牆法：其又分為外牆法和內牆法
利用偽元素選擇器清除浮動
利用overflow: hidden清除浮動
下面一一介紹：
1、給前面乙個父元素設定高度**如下：注意點：在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
2、給後面的盒子新增clear屬性**如下：clear屬性取值:
none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
注意點：當我們給某個元素新增clear屬性之後, 那麼這個屬性的margin屬性就會失效
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
3、隔牆法：其又分為外牆法和內牆法**如下：外牆法
在兩個盒子中間新增乙個額外的塊級元素
給這個額外新增的塊級元素設定clear: both;屬性
注意點:
外牆法它可以讓第二個盒子使用margin-top屬性
外牆法不可以讓第乙個盒子使用margin-bottom屬性
內牆法
在第乙個盒子中所有子元素最後新增乙個額外的塊級元素
給這個額外新增的塊級元素設定clear: both;屬性
注意點:
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法它可以讓第乙個盒子使用margin-bottom屬性
外牆法和內牆法區別?
外牆法不能撐起第乙個盒子的高度, 而內牆法可以撐起第乙個盒子的高度
注意點:
在企業開發中不常用隔牆法來清除浮動
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
4、利用偽元素選擇器清除浮動**如下：其中關於偽類選擇器的解釋：
什麼是偽元素選擇器?
偽元素選擇器作用就是給指定標籤的內容前面新增乙個子元素或者給指定標籤的內容後面新增乙個子元素
利用偽元素選擇器清除浮動
本質上就是內牆法, 只不過是直接通過css**新增了內牆, 其它特性和內牆法都一樣
注意點:
ie6中不支援這種方式, 為了相容ie6必須給前面的盒子新增*zoom:1;屬性
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
5、利用overflow: hidden清除浮動**如下：其中關於overflow: hidden的作用介紹：
1.1 可以將超出標籤範圍的內容裁剪掉
1.2 清除浮動
1.3 可以通過overflow: hidden;讓裡面的盒子設定margin-top之後, 外面的盒子不被頂下來
關於CSS浮動以及清除浮動的幾種方法
眾所周知，css浮動在日常頁面運用中起到非常重要的作用。例如，我們可以利用浮動來實現多欄布局等。如下圖，qzone利用浮動來實現雙欄布局的示例 它的頁面 是這樣的 主要 html部分 css部分 主要 col menu col main 不難看出，qzone是通過給左右欄定寬並且浮動來實現的。htm...
css清除浮動的幾種方法
我一直以為產生浮動要我們給元素設定float，例如這裡提到的 今天我發現如果父盒子高度不定，子元素沒有設定浮動，如果父盒子高度變為0，那麼裡面的子元素會浮動，效果 黃色盒子上移了，很明顯child產生了浮動，效果等同於父盒子高度不定，子元素設定浮動，那麼父盒子高度會變成0，也就是高度坍塌。那麼如何解...
css清除浮動的幾種方法
當對某個標籤使用浮動的時候，該塊內容就會脫離文件流，其父元素便不再包裹該標籤內容，父元素的高度會變成0，出現高度塌陷的問題。這個時候就要清楚浮動。今天就來介紹一下css清除浮動的幾種方法。1.在文件最後麵新加乙個空的div,如下 style clear both div 但是如果使用這種方法，新增了...