**一、浮動產生原因 **
般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。
本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了。
簡單地說，浮動是因為使用了float:left或float:right或兩者都是有了而產生的浮動。
浮動產生負作用
1、背景不能顯示
由於浮動產生，如果對父級設定了（css background背景）css背景顏色或css背景，而父級不能被撐開，所以導致css背景不能顯示。
2、邊框不能撐開
如上圖中，如果父級設定了css邊框屬性（css border），由於子級裡使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。
3、margin padding設定值不能正確顯示
由於浮動導致父級子級之間設定了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。
三、css解決浮動，清除浮動方法
這裡divcss5為了統一講解浮動解決方法，假設了有三個盒子物件，乙個父級裡包含了兩個子級，子級乙個使用了float:left屬性，另外乙個子級使用float:right屬性。同時設定div css border，父級css邊框顏色為紅色，兩個子級邊框顏色為藍色；父級css背景樣式為黃色，兩個子級背景為白色；父級css width寬度為400px，兩個子級css寬度均為180px，兩個子級再設定相同高度100px，父級css height高度暫不設定（通常為實際css布局時候這樣父級都不設定高度，而高度是隨內容增加自適應高度）。
父級css命名為「.divcss5」對應html標籤使用「」
兩個子級css命名分別為「.divcss5-left」「.divcss5-right」
根據以上描述divcss5給出對應css**和html**片段
css**：
.divcss5
.divcss5-left,.divcss5-right
.divcss5-left
.divcss5-right
left浮動
right浮動
.divcss5
.divcss5-left,.divcss5-right
.divcss5-left
.divcss5-right
.divcss5
.divcss5-left,.divcss5-right
.divcss5-left
.divcss5-right
.clear
left浮動
right浮動
overflow:hidden解決css**：
.divcss5
.divcss5-left,.divcss5-right
.divcss5-left
.divcss5-right
.divcss5
.divcss5-left,.divcss5-right
.divcss5-left
.divcss5-right
可能的值
值 描述
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
20181127 Css中的盒子模型
前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。乙個盒子中主要的屬性就5個 width height padding border margin。如下 wi...
CSS中清除浮動的方式
什麼是浮動？使元素脫離文件流 標準流 按照指定方式發生移動，遇到父級邊界或者相鄰的浮動元素就停下來的一種現象。float left right inherit initial none 下面看乙個例子 div1 div2 div3 效果圖 從上面現象，div1 div2 div3因設定了float ...
css中清除浮動的主要方法
工作中因需要我們經常設定元素float，導致其脫離標準文件流，因此會對其父元素或兄弟元素產生影響。為了消除浮動 帶來的影響，下面總結幾種常用的清除浮動的方法，測試已通過 ie chrome firefox opera，需要的朋友可以參考下。1 父級div定義 height 如下 left right...