本章要跟大家介紹什麼是浮動以及浮動的清除方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、浮動
說浮動就必須提及文件流，HTML當中的元素依照從左到右，從上到下的順序進行排列稱為文檔流，也就是正常排列。
而浮動是什麼呢？浮動會讓元素脫離文檔流，假如A元素浮動了，原本排在該元素之後的元素發現A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之後(PS:但是文字並不會無視它，還會環繞A元素，也就是A元素沒有脫離文字流。
#而如果使用position的絕對定位會連文字流也脫離文檔流。
浮動的好處當然是佈局了，例如透過浮動來形成三列佈局，文字環繞等等。但是浮動也有一個問題，那就是會導致高度的塌陷，就像上面的圖片顯示，父元素的高度塌陷了，並沒有將浮動的子元素包裹進去，這樣子就會造成佈局上的錯誤。
##二、BFC
什麼是BFC？BFC是Block Formatting Context的縮寫，也就是區塊層級格式化上下文，建立BFC有以下情況：float的值不為none。overflow的值不為visible。display的值為table-cell, table-caption, inline-block中的任何一個。position的值不為relative和static。BFC的特性就是包裹浮動的元素。按照我的理解，當你創建BFC之後元素就會把裡面的東西視為自己的東西，包括浮動元素，然後創建一個私有領域給包裹進來。此外BFC還有還有以下特性。1.讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入一個父盒子，然後為父盒子創建BFC。
# 三、清除浮動的方法
##清除浮動方法大致有兩類，一類是clear:both | left | right ,另一類則是創建BFC,細分又可以分為多種。#####1.透過在浮動元素末尾添加空的標籤例如並設定樣式為clear:both | left | right ，其他標籤br等亦可。###
<div class="parent">
<div class="child"></div>
<div style="clear: both;"></div>
</div><div class="parent">
<div class="child"></div>
<br clear='all'>
</div>.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;//这一条可以省略，证明请看原文精益求精部分
clear:both;
}.clearfix {
zoom:1;
}// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix:before, .clearfix:after { content:""; display:table;}
.clearfix:after{ clear:both; overflow:hidden;}
.clearfix{ zoom:1; }3.父元素设置 overflow：hidden,(PS:在IE6中还需要触发 hasLayout ，例如 zoom:1)
优点：不存在结构和语义化问题，代码量极少。
缺点：由于hidden的原因，当内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，还会导致中键失效（鼠标中键）。
4.父元素设置 overflow：auto 属性
优点：同上
缺点：多个嵌套后，会有bug，详情看原文。
5.父元素也浮动
优点：代码少
缺点：总不能一直浮动到body吧。
6.父元素设置display:table
优点：结构语义化完全正确，代码量极少。
缺点：会造成盒模型的改变。
以上是什麼是浮動以及浮動的清除方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
