資訊專欄INFORMATION COLUMN
摘要：一浮動一浮動說浮動就必須提及一下文檔流，當中的元素按照從左到右，從上到下的順序進行排列稱之為文檔流，也就是正常排列。
說浮動就必須提及一下文檔流，HTML當中的元素按照從左到右，從上到下的順序進行排列稱之為文檔流，也就是正常排列。
而浮動是什么呢？浮動會讓元素脫離文檔流，假如A元素浮動了，原本排在該元素之后的元素發現A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之后(PS:但是文字并不會無視它，還會環繞A元素，也就是A元素沒有脫離文字流，
而如果使用position的絕對定位會連文字流也脫離文檔流。
浮動的好處當然是布局了，例如通過浮動來形成三列布局，文字環繞等等。但是浮動也有一個問題，那就是會導致高度的塌陷，就像上面的圖片顯示，父元素的高度塌陷了，并沒有將浮動的子元素包裹進去，這樣子就會造成布局上的錯誤。
什么是BFC？BFC是Block Formatting Context的縮寫，也就是塊級格式化上下文，創建BFC有以下情況：
BFC的特性就是包裹浮動的元素。按照我的理解，當你創建BFC之后元素就會把里面的東西視為自己的東西，包括浮動元素，然后創建一個私有領域給包裹進來。此外BFC還有還有如下特性。
1.讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入一個父盒子，然后為父盒子創建BFC。
2.創建BFC的元素將不會圍繞浮動元素，圖中文字用p標簽包裹并創建BFC，右上角浮動元素，可以看見文字并沒有環繞浮動元素。
清除浮動方法大致有兩類，一類是clear:both | left | right ,另一類則是創建BFC,細分又可以分為多種。
clear:both | left | right ，其他標簽br等亦可。
優點：簡單。
缺點：增加了額外的標簽，并且很顯然這并不符合語義化。
*使用 br標簽和其自身的 html屬性，br 有 clear=all | left | right | none；的屬性。
優點：簡單代碼量少，比空標簽語義化稍好。
缺點：同上。
::after偽元素(萬金油方法)ps:由于IE6-7不支持:after，使用`zoom:1觸發hasLayout。其實是通過 content 在元素的后面生成了內容為空的塊級元素
代碼如下
.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;
}
overflow：hidden,(PS:在IE6中還需要觸發 hasLayout ，例如 zoom:1)優點：不存在結構和語義化問題，代碼量極少。
缺點：由于hidden的原因，當內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素，還會導致中鍵失效（鼠標中鍵）。
overflow：auto 屬性優點：同上
缺點：多個嵌套后，會有bug，詳情看原文。
優點：代碼少
缺點：總不能一直浮動到body吧。
display:table優點：結構語義化完全正確，代碼量極少。
缺點：會造成盒模型的改變。
其余的參考上面如何創建BFC。
那些年我們一起清除過的浮動
關于Block Formatting Context－－BFC和IE的hasLayout
理解CSS布局和BFC
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2050.html
摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。 首先總結幾個基礎的概念： 浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...
摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。 首先總結幾個基礎的概念： 浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...
摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。 首先總結幾個基礎的概念： 浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...
摘要：清除浮動并不是說讓浮動元素回到文檔流清除浮動只會改變改元素自身的位置，并且只針對排在該元素前面的元素。 我在做頁面布局的時候，多多少少總會受到來自浮動的困擾，因此專門通過實踐來總結一下浮動與清除浮動。 首先總結幾個基礎的概念： 浮動：設置浮動的元素會脫離文檔流，不會影響塊元素的布局，但是會影響內聯元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會單個元素獨占一行 接下來我們通過實...
摘要：那我們舉個栗子當先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。總結總結下來，浮動與清除浮動的順序關系如下設置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設置浮動會引起父元素塌陷 為什么設置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網頁時用的最多的屬性之一。但...
閱讀 1460·2021-11-22 14:44
閱讀 2843·2021-11-16 11:44
閱讀 3206·2021-10-13 09:40
閱讀 1980·2021-10-08 10:04
閱讀 2363·2021-09-24 10:28
閱讀 2909·2021-09-06 15:02
閱讀 2957·2019-08-30 15:52
閱讀 2392·2019-08-30 13:20
