資訊專欄INFORMATION COLUMN
摘要：在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。破壞文檔流這是最本質(zhì)的特性，因此設(shè)計的初衷就是破壞文檔流。但是也有一種情況是，浮動元素前后并沒有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時候就是浮動錨點在起作用。
前幾天有小伙伴說對float的學(xué)習(xí)云里霧里的，下面我就給大家說一下關(guān)于float的一些問題。
在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。但是有很多情況，正常流是沒辦法實現(xiàn)的，因此我們需要一些手段來破壞流，從而實現(xiàn)一些特殊的布局，而本節(jié)的主角float就具備破壞流的特性。
float設(shè)計的初衷
很多新手在布局的時候，總喜歡用float來實現(xiàn)。例如一個三欄布局，左右固定，中間自適應(yīng)，有些人會通過float來一列一列把它們砌起來。這樣的布局極其容易崩潰，只要高度或者寬度稍微有些變化，整個頁面都會錯亂。因此float設(shè)計的初衷并不是用來布局的，其本意僅僅是實現(xiàn)圖片文字環(huán)繞效果，即圖片左浮動，文字環(huán)繞圖片，如下圖所示：
??
.float {
width: 150px; float: left;
}
.content {
width: 400px;
}
文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞
float的特性
很多新手一個元素設(shè)置了float屬性，會表現(xiàn)出如下特性：
包裹性
塊狀格式化上下文
破壞文檔流
沒有margin合并
包裹性
包裹性包含了包裹和自適應(yīng)兩個特性。
包裹指的是一個浮動元素，如果子元素寬度足夠小，則浮動元素的寬度就是該子元素的寬度，如下所示：
??
.float {
float: left;
}
這是浮動元素的子元素
.father {
width: 100px;
}
.float {
float: left;
}
這是浮動元素的子元素
塊狀格式化上下文
設(shè)定了float的元素，其display的最終值會表現(xiàn)為block或者table，具體轉(zhuǎn)換如下表：
設(shè)定值計算值inlineblockinline-blockblockinline-tabletabletable-rowblocktable-row-groupblocktable-columnblocktable-column-groupblocktable-cellblocktable-captionblocktable-header-groupblocktable-footer-groupblock
因此，設(shè)置了float的元素，下面的寫法是多余的：
.float {
float: left:
display: block;
}
.float {
float: left;
vertical-align: middle; /* 不起作用 */
}
格式化上下文屬于BFC的內(nèi)容，此處先不展開。
破壞文檔流
這是float最本質(zhì)的特性，因此float設(shè)計的初衷就是破壞文檔流。設(shè)置float的元素，會導(dǎo)致父元素高度塌陷，我們來看個例子：
??
.float {
float: left;
}
文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞
沒有margin合并
設(shè)置了float的元素，由于形成了BFC，因此也就沒有了margin合并。
float作用機(jī)制
我們先來看個例子：
.float {
float: right;
}
標(biāo)題 鏈接
浮動錨點是float元素所在的“流”中的一個點，這個點本身并不浮動，表現(xiàn)得就像是一個沒有margin、padding和border的空的內(nèi)聯(lián)元素。
浮動參考指的是浮動元素對齊參考的實體。
float元素的“浮動參考”是行框盒子，也就是float元素在當(dāng)前“行框盒子”內(nèi)定位，因此，上面的例子“鏈接”會在第二行展示。但是也有一種情況是，浮動元素前后并沒有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時候就是“浮動錨點”在起作用。因為“浮動錨點”表現(xiàn)得像一個內(nèi)聯(lián)元素，有內(nèi)聯(lián)元素，自然就有行框盒子，只是這個盒子看不見也摸不著罷了。
float實現(xiàn)流體布局
前面文字環(huán)繞的例子，只要稍微改造一下就可以實現(xiàn)兩欄或多欄的自適應(yīng)布局，代碼如下：
.father {
overflow: hidden; height: 200px;
}
.float {
float: left; width: 100px;
}
.content {
margin-left: 120px;
}
文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞
總結(jié)
float設(shè)計的初衷不是布局，而是文字環(huán)繞效果
float的特性：包裹性、塊狀格式化上下文、破壞性、沒有margin合并
float的機(jī)制：浮動錨點和浮動參考
float實現(xiàn)自適應(yīng)布局的思路
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114702.html
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...
摘要：內(nèi)容簡述關(guān)于，確實太繁雜了，內(nèi)容多。寫好不易，基本上就這個調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個瀏覽器可能表現(xiàn)不一樣。 內(nèi)容簡述 關(guān)于CSS，確實太繁雜了，內(nèi)容多。寫好不易，基本上就這個調(diào)了。大家肯定聽過CSS奇淫技巧吧，關(guān)于這個我還沒有去深入了解，只是說普通的效果啥的，我...
摘要：前段時間寫過一篇基礎(chǔ)知識之，當(dāng)時對的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出原文已修正，如有誤導(dǎo)實在抱歉。浮動的基礎(chǔ)知識浮動有個屬性左浮動右浮動不浮動繼承。浮動元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級元素會環(huán)繞該元素，塊級元素則不受影響。 前段時間寫過一篇CSS基礎(chǔ)知識之position，當(dāng)時對float的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出（原文已修正，如有誤導(dǎo)實在抱歉）。現(xiàn)對float進(jìn)行更深入的...
摘要：年月初，中共中央國務(wù)院發(fā)布了關(guān)于構(gòu)建和諧勞動關(guān)系的意見，明確提出切實保障職工休息休假的權(quán)利，完善并落實國家關(guān)于職工工作時間全國年節(jié)及紀(jì)念日假期帶薪年休假等規(guī)定。下一步要抓好這項工作的落實。 一直以來響應(yīng)式布局都是利用的bootstrap來做，但是在手機(jī)上瀏覽的話，bootstrap樣式文件還是有點大 118k，如果再用上一些js庫的話，上個幾百k是輕輕松松了，這樣一來用移動流量的話真的...
閱讀 3268·2021-09-23 11:55
閱讀 2608·2021-09-13 10:33
閱讀 1667·2019-08-30 15:54
閱讀 3096·2019-08-30 15:54
閱讀 2364·2019-08-30 10:59
閱讀 2370·2019-08-29 17:08
閱讀 1805·2019-08-29 13:16
閱讀 3589·2019-08-26 12:25
