整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
么是 CSS Float（浮動）？
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素怎樣浮動
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊：
實例
img
{
float:right;
}
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對圖片廊使用 float 屬性：
實例
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。
使用 clear 屬性往文本中添加圖片廊：
實例
.text_line
{
clear:both;
}
嘗試一下 ?
更多實例
為圖像添加邊框和邊距并浮動到段落的左側(cè)
讓我們?yōu)閳D像添加邊框和邊距并浮動到段落的左側(cè)
標題和圖片向右側(cè)浮動
讓標題和圖片向右側(cè)浮動。
讓段落的第一個字母浮動到左側(cè)
改變樣式，讓段落的第一個字母浮動到左側(cè)。
創(chuàng)建一個沒有表格的網(wǎng)頁
使用 float 創(chuàng)建一個網(wǎng)頁頁眉、頁腳、左邊的內(nèi)容和主要內(nèi)容。
CSS 中所有的浮動屬性
"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允許元素周圍有浮動元素。 | leftrightbothnoneinherit | 1 |
| float | 指定一個盒子（元素）是否可以浮動。 | leftrightnoneinherit | 1 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
web網(wǎng)頁制作的工作中，元素的float屬性非常常用。顧名思義float屬性就是浮動的意思，運用了浮動屬性的元素常稱為浮動元素。我們經(jīng)常使用元素浮動屬性來控制網(wǎng)頁的結(jié)構(gòu)以及制作一些酷炫的效果。但是這個屬性具有難以把握的特點，下面逐條進行說明：
a. 運用了這種屬性的元素會對該元素自身的行為和表現(xiàn)有影響；
b. 對于運用浮動屬性的元素，其父級和兄弟級別的元素會對它產(chǎn)生干擾；
c. 浮動元素對其包含或者包含它的元素也會有影響。
對于上面所說的內(nèi)容我將通過一個在我工作中遇到的問題作為例子進行說明，首先我將所用到的代碼展示如下：
先直接使用html代碼，其效果就是三行排列的段落；然后再逐行代碼進行渲染，當?shù)谝恍泻偷谒男蠧SS代碼渲染完后，我們會發(fā)現(xiàn)段落呈橫向排列而且所有的段落不在其父元素.site-nav中。其效果如下圖所示：
上圖中黃色的部分表示.site-nav的部分，而三個段落都不在其中。從這可以看出使用了浮動元素后元素不會占據(jù)文檔流的位置，而且其父元素的高度變?yōu)?。對于這樣的狀況，需要清除浮動元素的影響，具體來說就是需要在浮動元素后添加clear:both;屬性來消除其影響。
通流(normal flow)
這個單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標準流都可以。
前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：普通流（標準流）、浮動和定位。
html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網(wǎng)頁內(nèi)標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。
浮動(float)
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現(xiàn)“環(huán)繞”圖片的效果。
后來，我們發(fā)現(xiàn)浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局）
什么是浮動？
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
浮動詳細內(nèi)幕特性
浮動脫離標準流，不占位置，會影響標準流。浮動只有左右浮動。
浮動首先創(chuàng)建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。
浮動的元素排列位置，跟上一個元素（塊級）有關(guān)系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。 元素添加浮動后，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認的內(nèi)容多少浮動根據(jù)元素書寫的位置來顯示相應的浮動。
總結(jié)： 浮動 --->
浮動的目的就是為了讓多個塊級元素同一行上顯示。
float 浮 漏 特
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏： 加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。
閱讀報紙時容易發(fā)現(xiàn)，雖然報紙中的內(nèi)容很多，但是經(jīng)過合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁時，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對網(wǎng)頁進行“排版”。
“版心”(可視區(qū)) 是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。
布局流程
為了提高網(wǎng)頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區(qū)）。
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、制作HTML結(jié)構(gòu) 。
4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個模塊。
一列固定寬度且居中
人生就像乘坐北京地鐵一號線：
途經(jīng)國貿(mào)，羨慕繁華；
途經(jīng)天安門，幻想權(quán)力；
途經(jīng)金融街，夢想發(fā)財；
經(jīng)過公主墳，遙想華麗家族；
經(jīng)過玉泉路，依然雄心勃勃…
這時，有個聲音飄然入耳:乘客你好,八寶山馬上就要到了！
頓時醒悟：人生苦短，有始有終。
好比我們的浮動，有浮動開始，則就應該有浮動結(jié)束。
為什么要清除浮動
我們前面說過，浮動本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現(xiàn)， 但是，你不能說浮動不好
。
由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
準確地說，并不是清除浮動，而是清除浮動后造成的影響
如果浮動一開始就是一個美麗的錯誤，那么請用正確的方法挽救它。
清除浮動本質(zhì)
清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題。
清除浮動的方法
其實本質(zhì)叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中，clear屬性用于清除浮動，其基本語法格式如下：
選擇器{clear:屬性值;}
額外標簽法
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。
優(yōu)點： 通俗易懂，書寫方便
缺點： 添加許多無意義的標簽，結(jié)構(gòu)化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。
父級添加overflow屬性方法
可以通過觸發(fā)BFC的方式，可以實現(xiàn)清除浮動效果。（BFC后面講解）
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現(xiàn)。
優(yōu)點： 代碼簡潔
缺點： 內(nèi)容增多時候容易造成不會自動換行導致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
使用after偽元素清除浮動
:after 方式為空元素的升級版，好處是不用單獨加標簽了
使用方法：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
?
.clearfix {*zoom: 1;} /* IE6、7 專有 */
優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
注意： content:"." 里面盡量跟一個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。
使用before和after雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話可以出發(fā)BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點： 代碼更簡潔
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米、騰訊等
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
