一、關於float浮動及其產生
在網頁布局排版中我們會經常用到float元素，float定義元素往哪個方向浮動，使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來
。它有四個屬性值：
none （預設值，
元素不浮動，並會顯示在其在文字中出現的位置
）。left （
元素向左浮動
） 。right （元素向右浮動）。
inherit （規定應該從父元素繼承 float 屬性的值） 。
先來看看浮動的效果，為了讓兩個塊級元素併排顯示，我們使用了float屬性
<head>
<
metacharset="utf-8">
<
title>浮動
title>
<
style>body>div
.div1
.div2
style>
head>
<
body>
<
div>
<
divclass="div1">我是div1
div>
<
divclass="div2">我是div2
div>
div>
body>
效果：
div1和div2都是向左浮動，達到了我們併排排列的效果但是我們也看到了float也產生了很多***：父元素邊框塌陷，
背景不能顯示、不能設定padding和margin等等。所以這就是我們要學習消除浮動影響的原因。二、消除浮動的方法
1.clear清除法
在浮動元素後面新增乙個空的div。
<效果：head>
<
metacharset="utf-8">
<
title>浮動
title>
<
style>body>div
.div1
.div2
.empty
style>
head>
<
body>
<
div>
<
divclass="div1">我是div1
div>
<
divclass="div2">我是div2
div>
<
divclass="empty">
div>
div>
body>
2.給父元素設定高度
在css中父div中加height：200px；效果為：
這個方法是最簡單的，但是會導致我們**的擴充套件性變差，因為我們的子元素一旦變化父元素也要變化，這樣就變得很不靈活了，所以在專案中我們不一般不用這種方法。
3.讓父元素也浮動
在父元素div中加float：left；但是這種方法的缺點是要給每乙個父元素都加float比較麻煩，如果父元素多的話那就更麻煩了，同時浮動多了容易出問題，所以一般也不推薦這種方法。
4.overflow：hidden
這個方法非常簡單方便，在父元素中加overflow：hidden；(body>
div)這樣可以解決邊框塌陷的問題，但是要注意這個方法在下拉列表框場景下會遇到新的問題，並且還要考慮瀏覽器的相容問題。
5.after偽類清除法
這個方法是最好的，就出了寫法稍微麻煩一點點，沒有什麼***。寫法如下：
.father:after
下面來看我們上面的**用after偽類清除，同樣達到了我們的目的：
<效果：style>body>divbody div:after
.div1
.div2
style>
head>
<
body>
<
div>
<
divclass="div1">我是div1
div>
<
divclass="div2">我是div2
div>
div>
body>
三、總結
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...