首先，浮動這個樣式的出現，僅僅只是為了實現**環繞的效果，現在大多時利用浮動來布局；浮動：
使元素推理文件流，按照指定方向發生移動；
遇到父級邊界或者相鄰的浮動元素會停下來；
浮動的特性：
1，塊元素一行顯示多個；
2，內聯元素支援寬高；
3，沒有設定寬度時由內容撐開寬度；
4，脫離文件流；
浮動的破壞性：
浮動元素脫離文件流後，導致父級元素高度塌陷。父級元素無法包裹住子級浮動元素；
為什麼要清除浮動：
解決父級高度塌陷；
清除浮動的方法：
1，clear清除浮動
clear:left || right || both || none
clear:left 清除左側浮動元素；
clear:right 清除右側浮動元素
clear:both 清除左右兩邊
clear:none 不清除
效果圖：
缺點：如果浮動元素過多浪費標籤；不優雅；
2.inline-block請浮動
效果圖：
缺點：margin：auto；失效；
3.的clear屬性請浮動
效果圖：
缺點： 當前頁面有很多模組用到浮動時，每個用到的模組都要加
;不符合w3c標準；
4.以浮制浮
給父級新增浮動
效果圖：
缺點：不理智的行為，總會有個父級節點會塌陷；
5.：afte偽類請浮動
**：效果圖：
缺點：無；目前最優雅的清除浮動的方式；
CSS 清除浮動的幾種常用方法
本文總結自，b站 pink老師 鳴謝 為什麼要清除浮動？由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最後父級盒子高度為零時就會影響下面的標準流盒子。清除浮動語法 選擇器 屬性及描述 屬性值描述left 不允許左側有浮動元素 清除左側浮動的影響 right 不允許右側有浮動元素 ...
清除浮動的幾種常用方法小結
在web的應用中浮動不是什麼好東西，但是在學習生活中，卻不可或缺，今天就清除浮動的方法做個小結。1 新增額外標籤 在浮動元素末尾新增乙個空的標籤例如 其他標籤br等亦可。div class warp id float h2 1 新增額外標籤 h2 div class main left main d...
清除浮動常用的幾種方式
1.父元素div定義高度 原理 父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。優點 簡單 少 容易掌握 缺點 只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題 建議 不推薦使用，只建議高度固定的布局時使用 2.結尾處加空div標籤 cle...