一、css清除浮动方法学习笔记总结（超详细，简单易懂）
**
css清除浮動方法學習筆記總結（超詳細，簡單易懂）
**
問題：
上圖中，由于container(父級元素）未設置高度，其內部子元素設置了float浮動，導致與container同級（也就是container下面的元素）位置發生錯亂，出現在了container父元素的設置了浮動的子元素背面。
原因：
父級元素的高度為0，設置了浮動的子元素，不會像未設置浮動的子元素那樣會自動撐開父元素
1.為什么需要浮動？
布局的需要：讓多個盒子(div)水平排列成一行；實現盒子的左右對齊
雖然我們行內塊元素（inline-block）可以幫助我們實現多個元素一行顯示，但是他卻有自己的缺陷：
1）. 它可以實現多個元素一行顯示，但是中間會有空白縫隙
2）. 它不能實現盒子左右對齊
2.什么是浮動(float)？
漂浮在普通流的上面。 脫離標準流。 俗稱 “脫標”
1）概念：元素的浮動是指設置了浮動屬性的元素會
2）作用：
3）語法：
在 CSS 中，通過 float 中文，屬性定義浮動，語法如下：
選擇器 { float: 屬性值; }| none | 元素不浮動（默認值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
一、父級元素設置了高度的情況下：
在給父級元素設置了高度，子元素設置了float浮動的情況下，不需要清除浮動。因為，父級元素有高度，所有浮動的子元素只是在父級元素內部進行了浮動，這并不會對父級后面的其他元素在文檔流中的位置產生影響。
二、父級元素沒有設置高度的情況下：
有些實際情況中，可能不能夠給父級元素設置高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標準流盒子。但我們實際想要達到一種子元素有多高，父級元素就自動有多高，也就是父元素被子元素所撐開的效果。
在這種不設置高度的情況下，就必須清除浮動！
下面介紹四種不設置父級高度情況下的清除浮動的方法：
1)在CSS中，clear屬性用于清除浮動
- 語法：
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響 |
但是我們實際工作中， 幾乎只用 clear: both;
1).額外標簽法(隔墻法)
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽
例如
，或則其他標簽br等亦可。
注意：這個浮動元素末尾新增的必須是塊元素，不能是行內元素，否則清除浮動失效！
- 優點： 通俗易懂，書寫方便
- 缺點： 添加許多無意義的標簽，結構化較差。
2).父級添加overflow屬性方法
可以給父級添加：
overflow為 hidden| auto| scroll都可以實現。
- 優點： 代碼簡潔
- 缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
3).使用after偽元素清除浮動
注意：這也是設置在父元素上面
:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1; } /* IE6、7 專有 */ <!DOCTYPE html> <html><head><meta charset="utf-8"><title>清除浮動的方法總結</title><style type="text/css">.container {width: 400px;/* 父元素container不設置高度的情況下，子元素設置float浮動，會出現父元素container的高度為0的情況 */background-color: #00BFFF;margin: 0 auto;/* overflow: hidden; *//* 給設置了浮動的子元素的父元素添加overflow:hidden 來清除浮動*/}.box1 {float: left;width: 100px;height: 100px;background-color: #98FB98;}.box2 {float: left;width: 200px;height: 200px;background-color: bisque;}.footer {height: 300px;background-color: lightcoral;text-align: end;}.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom: 1;}/* IE6、7 專有 *//* .clear {clear: both;} */</style></head><body><div class="container clearfix"><div class="box1">浮動的box1</div><div class="box2">浮動的box2</div><!-- <div class="clear"></div> --></div><div class="footer">container下面的footer</div></body> </html>- 優點： 符合閉合浮動思想 結構語義化正確
- 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
- 代表網站： 百度、淘寶網、網易等
4).使用雙偽元素清除浮動
注意：這也是設置在父元素上面
使用方法：
.clearfix:before,.clearfix:after { content:"";display:table; } .clearfix:after {clear:both; } .clearfix {*zoom:1; }- 優點： 代碼更簡潔
- 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
- 代表網站： 小米、騰訊等
清除浮動總結
一、什么時候用清除浮動呢？
| 額外標簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標簽，結構化較差。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
二、清除浮動的本質：
? 清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之后， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響。準確地說，并不是清除浮動，而是清除浮動后造成的影響。
三、清除浮動的策略：
閉合浮動.只讓浮動在父盒子內部影響，不影響父盒子外面的其他盒子。
總結
以上是生活随笔為你收集整理的一、css清除浮动方法学习笔记总结（超详细，简单易懂）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python装饰器函数执行后日志_pyt
- 下一篇： 八、一篇文章快速搞懂MySQL 常见的数