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