優秀文章：https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

浮動細節原理

所有元素設置float浮動之后，會脫離文檔流，脫離文檔流的元素都會變成行內塊

脫離文檔流之后，不再區分行內元素和塊元素，都是行內塊

不再獨占頁面一行

可以設置寬高，寬高默認由內容撐開

所有元素設置浮動之后，會脫離文檔流，不再占用文檔流位置，可以認為變為行內塊

塊元素設置浮動之后，水平布局的等式不需要強制成立，因此，塊元素浮動之后可以在一行顯示

浮動元素向左或向右時，不會超過它前面的其他浮動元素(水平方向)

浮動元素會盡可能的向左/右移動，直到碰到邊框或別的浮動元素(水平方向)

浮動元素所在位置高度不會超過在它上一個浮動的元素，最多和它一樣高(垂直方向)

上一個浮動元素，看的是html而不是css

解釋了box3上方有足夠的空位卻沒有上移的原因

浮動元素布局 link

浮動元素默認不會從父元素中移出

每個盒子都自成一界，有自己的文檔流，內部如何布局與外部元素無關

可以想象父元素就是一堵墻，子元素不管怎么浮動也無法逾越

父元素如果沒有設置高度，所有子元素浮動，脫離文檔流，會導致父元素高度塌陷

浮動會使元素脫離文檔流，但不會脫離文本流，文字環繞效果

浮動卡的現象(上面的水平垂直原理)

當浮動的元素高度不一致時，會出現卡的現象，直到調整到合適的高度值，才恢復正常的左浮動

浮動的元素會盡可能的向左/右移動，直到碰到邊框或別的浮動元素(浮動卡的現象)

浮動元素之間沒有垂直margin的合并

垂直margin合并僅是文檔流的特性

高度塌陷問題(脫離文檔流導致的問題)

對于父元素來說(父元素沒有設置高度)，脫離了文檔流的子元素不能再撐開父元素了，所以會出現高度塌陷的問題

高度塌陷是因為子元素脫離文檔流，相對定位不脫離文檔流，因此不會塌陷

沒有寬度塌陷？ 如果不設置寬高，寬度默認為父元素寬度，高度默認為 0

行內元素不會占據浮動元素空間

浮動的元素，脫離文檔流，不再占用原本空間，其他未浮動塊和行內塊元素就會占據它原來的位置

行內元素沒有寬高，寬高由文字內容撐開，但是浮動未脫離文本流，呈現文字環繞效果

解決方案，開啟BFC

BFC的概念(塊級格式化環境)link

簡單介紹

BFC是css中的一個隱含屬性，可以為一個元素開啟BFC

BFC不能直接開啟，只能間接開啟，以下開啟BFC的方式都會存在副作用

利用開啟BFC可以解決父元素高度塌陷問題

元素開啟BFC后的特點

開啟BFC的元素不會被浮動元素所覆蓋

開啟BFC的元素不會和其中的子元素發生上外邊距重疊(合并)

開啟BFC的元素可以包含浮動的子元素(因此不會塌陷)

以下方式可以開啟BFC

開啟元素的浮動

將元素設置為行內塊元素

將元素的overflow設置為一個非visible的值，如 overflow: auto(推薦)

利用after偽類配合 clear 清除浮動解決高度塌陷，是目前最好的解決方案，這個方式不會開啟BFC

代碼示例

不會被浮動元素所覆蓋，可以包含浮動的子元素

不會和其中的子元素發生上外邊距重疊

clear 清除浮動

如果我們不希望某個元素因為其他元素浮動的影響而改變位置，可以通過clear屬性來清除浮動元素對當前元素所產生的影響

清除浮動原理

清除浮動的原理是，設置clear之后，瀏覽器會對該元素添加一個上外邊距，以使其位置不受其他元素的影響

清除浮動細節

塊元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之后可以理解為橫向排列

清除浮動可以理解為打破橫向排列

清除浮動只能影響使用清除的元素本身，不能影響其他元素

清除浮動并不是讓浮動的元素不浮動了，該浮動還浮動

清除浮動的關鍵字是clear，定義如下：

一句話總結：clear清除浮動元素對當前元素所產生的影響

clear ： none | left | right | both

none ： 默認值。允許兩邊都可以有浮動對象

left ： 不允許左邊有浮動對象(添加一個除了它自己左浮動中高度最高的上外邊距)

right ： 不允許右邊有浮動對象(添加一個除了它自己右側浮動中高度最高的上外邊距)

both ： 不是兩側都不能右浮動(添加一個除了它自己左右浮動元素中高度最大的上外邊距)

clear 詳細討論

怕我以后忘了，所以這里各種情況詳細討論一遍

1. 假如box1、box2、box3三個盒子，它們分別是左浮動，左浮動，右浮動，現在給box2添加clear:left

① 給box2添加clear:left，相當于給box2添加除了它自己左浮動盒子中高度較大的上外邊距

② 雖然1，2，3盒子都脫離文檔流，但在空中行內塊依然是從左到右，從上到下排列，box2位置確定

③ 為何box3也跟著下來呢？html中box3在box2后面，css中box2中執行clear:left時，html中box3還未生成

④ 輪到box3執行浮動時，它自然跟在box2后面

2. 假如box1、box2、box3三個盒子，它們分別是左浮動，左浮動，右浮動，現在給box2添加clear:right

① html中box3在box2后面，css中box2中執行clear:right時，html中box3還未生成

② 故css中box2中執行clear:right時，右邊并沒有浮動元素

3. 假如box1、box2、box3三個盒子，它們分別是左浮動，不浮動，右浮動，現在給box2添加clear:left

① 給box2添加clear:left，相當于給box2添加除了它自己左浮動盒子中高度較大的上外邊距

② box2并沒有浮動，獨占一行，box3只能下移了

4. 假如box1、box2、box3三個盒子，它們分別是左浮動，右浮動，右浮動，現在給box3添加clear:right

① 給box3添加clear:right，相當于給box3添加除了它自己右浮動盒子中高度較大的上外邊距

② 給box3添加clear:both，相當于給box3添加除了它自己左右浮動盒子中高度較大的上外邊距

after偽類解決高度塌陷 link

前面介紹了通過開啟BFC解決高度塌陷問題，以下介紹非開啟BFC的方案

方案1

直接設置父元素的高度

優勢：極其簡單

弊端：可能違背初衷，不設置高度本身就是為了盒子高度隨內容變化

方案2 (非BFC)

在父元素中，追加空子元素，并設置其clear屬性為both

clear是css中專用于清除浮動的屬性

原理：追加空盒子，然后clear:both，相當于給新增空盒子添加除了它自己左右浮動盒子中高度較大的上外邊距，以撐開父元素

作用：清除當前元素前面的元素浮動所帶來的影響

優勢：代碼量少 容易掌握 簡單易懂

弊端：該方式是以html去修改樣式，會添加無意義的空標簽，有違結構與表現的分離，不便于后期的維護

改進：通過css去修改樣式顯然更合理

方案2.1(非BFC)(比較完美)

使用after偽元素添加box， 配合clear清除浮動

相對于空標簽閉合浮動的方法

優勢：不破壞文檔結構，沒有副作用

弊端：代碼量多

.clearfix:after{

content: "";

display: block;

clear: both;

}

after 選擇器向選定的元素之后插入內容

content:""; 生成內容為空

display: block; 生成的元素以塊級元素顯示,

clear:both; 清除前面元素浮動帶來的影響

方案2.2(非BFC)(同時解決高度塌陷和父子元素外邊距合并)

使用after偽元素添加box， 配合clear清除浮動，解決高度塌陷

使用before偽元素添加box， 配合clear清除浮動，解決父子元素外邊距合并

方案3

設置父元素浮動 (開啟BFC)

優勢：簡單，代碼量少，沒有結構和語義化問題

弊端：對后續元素會有影響

方案4

為父元素設置overflow屬性 (開啟BFC)

取值：hidden 或 auto

優勢：簡單，代碼量少

弊端：如果有內容要溢出顯示(彈出菜單)，也會被一同隱藏

方案5

父元素設置display:table (開啟BFC)

優勢：不影響結構與表現的分離，語義化正確，代碼量少

弊端：盒模型屬性已經改變，會造成其他問題

方案7

同時解決高度塌陷 和 margin邊距重疊

margin邊距重疊機制是否要消除看情況

.clearfix:before, .clearfix:after{

content: "";

display: table;

}

.clearfix:after{

clear: both;

}

/*ie是非標準瀏覽器 用來兼容ie*/

.clearfix{

zoom: 1;

}

總結

以上是生活随笔為你收集整理的html中使浮动的字为行排列,CSS布局：float浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。