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