優(yōu)秀文章：https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

浮動細(xì)節(jié)原理

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

脫離文檔流之后，不再區(qū)分行內(nèi)元素和塊元素，都是行內(nèi)塊

不再獨(dú)占頁面一行

可以設(shè)置寬高，寬高默認(rèn)由內(nèi)容撐開

所有元素設(shè)置浮動之后，會脫離文檔流，不再占用文檔流位置，可以認(rèn)為變?yōu)樾袃?nèi)塊

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

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

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

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

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

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

浮動元素布局 link

浮動元素默認(rèn)不會從父元素中移出

每個盒子都自成一界，有自己的文檔流，內(nèi)部如何布局與外部元素?zé)o關(guān)

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

父元素如果沒有設(shè)置高度，所有子元素浮動，脫離文檔流，會導(dǎo)致父元素高度塌陷

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

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

當(dāng)浮動的元素高度不一致時，會出現(xiàn)卡的現(xiàn)象，直到調(diào)整到合適的高度值，才恢復(fù)正常的左浮動

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

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

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

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

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

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

沒有寬度塌陷？ 如果不設(shè)置寬高，寬度默認(rèn)為父元素寬度，高度默認(rèn)為 0

行內(nèi)元素不會占據(jù)浮動元素空間

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

行內(nèi)元素沒有寬高，寬高由文字內(nèi)容撐開，但是浮動未脫離文本流，呈現(xiàn)文字環(huán)繞效果

解決方案，開啟BFC

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

簡單介紹

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

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

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

元素開啟BFC后的特點(diǎn)

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

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

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

以下方式可以開啟BFC

開啟元素的浮動

將元素設(shè)置為行內(nèi)塊元素

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

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

代碼示例

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

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

clear 清除浮動

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

清除浮動原理

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

清除浮動細(xì)節(jié)

塊元素浮動之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動之后可以理解為橫向排列

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

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

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

清除浮動的關(guān)鍵字是clear，定義如下：

一句話總結(jié)：clear清除浮動元素對當(dāng)前元素所產(chǎn)生的影響

clear ： none | left | right | both

none ： 默認(rèn)值。允許兩邊都可以有浮動對象

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

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

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

clear 詳細(xì)討論

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

after偽類解決高度塌陷 link

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

方案1

直接設(shè)置父元素的高度

優(yōu)勢：極其簡單

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

方案2 (非BFC)

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

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

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

作用：清除當(dāng)前元素前面的元素浮動所帶來的影響

優(yōu)勢：代碼量少 容易掌握 簡單易懂

弊端：該方式是以html去修改樣式，會添加無意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，不便于后期的維護(hù)

改進(jìn)：通過css去修改樣式顯然更合理

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

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

相對于空標(biāo)簽閉合浮動的方法

優(yōu)勢：不破壞文檔結(jié)構(gòu)，沒有副作用

弊端：代碼量多

.clearfix:after{

content: "";

display: block;

clear: both;

}

after 選擇器向選定的元素之后插入內(nèi)容

content:""; 生成內(nèi)容為空

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

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

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

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

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

方案3

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

優(yōu)勢：簡單，代碼量少，沒有結(jié)構(gòu)和語義化問題

弊端：對后續(xù)元素會有影響

方案4

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

取值：hidden 或 auto

優(yōu)勢：簡單，代碼量少

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

方案5

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

優(yōu)勢：不影響結(jié)構(gòu)與表現(xiàn)的分離，語義化正確，代碼量少

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

方案7

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

margin邊距重疊機(jī)制是否要消除看情況

.clearfix:before, .clearfix:after{

content: "";

display: table;

}

.clearfix:after{

clear: both;

}

/*ie是非標(biāo)準(zhǔn)瀏覽器 用來兼容ie*/

.clearfix{

zoom: 1;

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。