案例？是說(shuō)float: ; 都有什么嗎？
創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為烏蘇等服務(wù)建站，烏蘇等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為烏蘇企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
left 元素向左浮動(dòng)。
right 元素向右浮動(dòng)。
none 默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。
inherit 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。
屬性值
float 是最開(kāi)始出現(xiàn)的一種布局方式，主要解決：文本在圖像周?chē)h(huán)繞，也即應(yīng)用于圖像。但是在css中，任何元素都可以浮動(dòng)， 浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框 ，而不論它本身是何種元素。
元素一般是處于普通流中，也即塊級(jí)元素獨(dú)占一行，從上往下依次顯示布局。行級(jí)元素可以在一行顯示多個(gè)，按照順序進(jìn)行顯示布局。
而添加了 float 布局的元素則會(huì)脫離原來(lái)所在的文檔流。并 ‘漂浮’ 在當(dāng)前所在的文檔流的位置（如果前一個(gè)元素沒(méi)有添加 float 布局的情況下），由于當(dāng)前元素文檔流實(shí)際上沒(méi)有被元素占用，因此當(dāng)前元素之后的元素會(huì)按照普通流布局的方式，占用當(dāng)前元素的文檔流。表現(xiàn)為： 丟失空間
也即：
此時(shí)由于第一個(gè)元素添加了 float:left ，則脫離了原來(lái)的文檔流，后面元素會(huì)向上移動(dòng)，占用第一個(gè)元素的空間。
如果第二個(gè)元素也添加了 float ，那么可以這樣去思考，由于第一個(gè)元素的原因，第二個(gè)元素所處的文檔流變成了第一個(gè)元素所處的文檔流，此時(shí)再給第二個(gè)元素添加 float ，那么也會(huì)像第一個(gè)元素一樣，脫離當(dāng)前的文檔流，使得當(dāng)前元素和第一個(gè)元素一樣處于 '漂浮' 狀態(tài)，并緊跟著第一個(gè)元素顯示一排。
同樣，如果第二個(gè)元素后面還有其他元素，那么也會(huì)向上移動(dòng)，改變?cè)瓉?lái)所處的文檔流位置。
注意：添加了 float 的元素，只是在會(huì)脫離當(dāng)前所在的文檔流，但是仍然漂浮在當(dāng)前文檔流 上一層 ，而不是說(shuō)直接脫離整個(gè)文檔流，跑到所有文檔流的最頂部 。
從上面案例可以看出，添加了浮動(dòng)的元素會(huì)影響其后元素的布局。此外由于元素脫離原來(lái)的文檔流，且父盒子沒(méi)有添加高度屬性，那么父盒子無(wú)法感知到子盒子的存在，因此父盒子不會(huì)被撐開(kāi)。
知道了 float 帶來(lái)的不好的地方，則需要去清除浮動(dòng)帶來(lái)的影響。
方法一：采用css clear 屬性
將該屬性添加在被浮動(dòng)影響的后面元素，即可以清除浮動(dòng)
則受浮動(dòng)影響的元素就可以正常顯示了
因此在受浮動(dòng)影響的父元素，就可以利用此方法，在浮動(dòng)元素之后新增加一個(gè)元素，使新增加的元素清除浮動(dòng)，這樣新增加的元素的位置就在浮動(dòng)元素的下面，使得在一定程度上實(shí)現(xiàn)了撐開(kāi)盒子的作用。
方法二：BFC
其次還可以采用BFC，使得父元素形成獨(dú)立的空間，也即可以感知子元素的高度和寬度，在一定程度上也不會(huì)影響外面的元素的布局。
浮動(dòng)元素邊界不能超過(guò)父元素的padding
元素浮動(dòng)后會(huì)變?yōu)閴K元素包括行元素如 span ，所以浮動(dòng)后的元素可以設(shè)置寬高。
通過(guò)形狀浮動(dòng)可以讓內(nèi)容圍繞圖片，類(lèi)似于我們?cè)趙ord 中的環(huán)繞排版。要求圖片是有透明度的PNG格式。
shape-outside 定義了一個(gè)可以是非矩形的形狀，相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)圍繞該形狀進(jìn)行包裝。默認(rèn)情況下，內(nèi)聯(lián)內(nèi)容包圍其邊框， shape-outside 提供了一種自定義此包裝的方法，可以將文本包裝在復(fù)雜對(duì)象周?chē)皇呛?jiǎn)單的框中。
理解：使用形狀值來(lái)定義浮動(dòng)區(qū)域的浮動(dòng)，這將使得內(nèi)聯(lián)內(nèi)容會(huì)環(huán)繞著形狀，而不是產(chǎn)生浮動(dòng)的邊框。
關(guān)鍵字屬性值
函數(shù)值屬性
url值
文字通過(guò)給定的圖片，并且通過(guò)計(jì)算圖片的透明度后獲取的形狀區(qū)域進(jìn)行圍繞，這里需要注意的是此效果必須在服務(wù)器端預(yù)覽，本地預(yù)覽會(huì)報(bào)圖片跨域問(wèn)題，給定的圖片必須是有透明區(qū)域的圖片
漸變值
按照給定的漸變通過(guò)計(jì)算排除透明通道后得到的形狀，然后文字按照此形狀的邊緣進(jìn)行環(huán)繞
最后：函數(shù)值/url/linear-gradient可以和關(guān)鍵字屬性值搭配使用，此時(shí)關(guān)鍵字屬性作為基本形狀提供相應(yīng)的參考框盒。
clip-path 使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。且此方式原來(lái)的區(qū)域仍然存在，只是顯不顯示的問(wèn)題。裁剪之后只有規(guī)定的區(qū)域可以顯示。
基本語(yǔ)法
其中：
1、標(biāo)準(zhǔn)流——標(biāo)簽按照規(guī)定好默認(rèn)方式排列
2、浮動(dòng)
3、定位
多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。
float屬性用于創(chuàng)建浮動(dòng)框，將其移動(dòng)到一邊，直到左邊或者右邊邊緣及包含塊或另一個(gè)浮動(dòng)框的邊緣。
選擇器:{ float:屬性值}
1、 浮動(dòng)的元素會(huì)脫離標(biāo)準(zhǔn)流（脫標(biāo)），不再保留原來(lái)的位置
2、浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊
3、浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性
1、為了約束浮動(dòng)元素，一般采取的策略是：先用標(biāo)準(zhǔn)流的父元素排列上下位置，之后內(nèi)部子元素采取浮動(dòng)左右位置，符合網(wǎng)頁(yè)布局第一準(zhǔn)則。
2、一個(gè)元素浮動(dòng)了，理論上其余的兄弟元素也要浮動(dòng)。浮動(dòng)的盒子只會(huì)影響當(dāng)前浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流
父級(jí)盒子不給高度，自己盒子會(huì)撐開(kāi)父級(jí)盒子高度，但是加上浮動(dòng)就會(huì)無(wú)效。
額外標(biāo)簽法也稱為隔墻法，是W3C推薦的做法。會(huì)在浮動(dòng)元素的末尾添加一個(gè)空的標(biāo)簽。例如：div style="chear:both"/div。新的標(biāo)簽必須是塊級(jí)元素。
選擇器:{ clear :屬性值}
實(shí)際工作中幾乎只用clear :both 。清除浮動(dòng)的策略是閉合浮動(dòng)，只讓浮動(dòng)在父級(jí)盒子內(nèi)部影響。
可以給父級(jí)添加overflow屬性，將其屬性值設(shè)置為hidden、auto或scroll。這個(gè)屬性還用于外邊距合并。 ? 缺點(diǎn)就是無(wú)法顯示溢出部分。
:after偽元素法相當(dāng)于額外標(biāo)簽法的升級(jí)版，也是在浮動(dòng)元素尾部添加空的塊級(jí)元素，用法是給父元素添加屬性。以下為固定格式。
類(lèi)似于:after 偽元素法，只不過(guò)前后都會(huì)插入一個(gè)盒子，更符合閉合的概念。
浮動(dòng)元素可以相互嵌套，嵌套規(guī)律與流動(dòng)元素的嵌套相同。浮動(dòng)的包含元素（父元素）總會(huì)自動(dòng)調(diào)整自身的高度和寬度以實(shí)現(xiàn)對(duì)浮動(dòng)元素的包含。
我們來(lái)看一個(gè)例子：
瀏覽器效果圖：
這時(shí)會(huì)發(fā)現(xiàn)父元素會(huì)自動(dòng)調(diào)整自身的大小來(lái)包含子元素。
如果包含元素定義了高度和寬度則他不會(huì)隨子元素的大小而自動(dòng)調(diào)整自身顯示區(qū)域來(lái)適應(yīng)子元素的顯示。注意，在IE6及更低版本瀏覽器中包含框仍然能夠自動(dòng)調(diào)整自身大小來(lái)適應(yīng)子元素的顯示大小，不過(guò)在IE7版本中微軟糾正了這個(gè)不符合標(biāo)準(zhǔn)的顯示方法。如下
示例：
瀏覽器效果圖：
默認(rèn)狀態(tài)下溢出不隱藏，我們可以添加 樣式 overflow:hidden; 隱藏多余的部分或overflow: scroll; 多余部分顯示滾動(dòng)條。
如果把浮動(dòng)元素嵌入到流動(dòng)元素之內(nèi)，則父元素不能夠自適應(yīng)子元素的高度，
如下示例：
瀏覽器效果圖：
在上圖中可以看到包含元素div并，沒(méi)用顯示。原因就是包含元素沒(méi)有適應(yīng)子元素的高度，而是根據(jù)自身定義的屬性以獨(dú)立的形式顯示（父元素沒(méi)有被撐開(kāi)，僅收縮成一條直線顯示）。所以，在應(yīng)用混合嵌套式，要預(yù)測(cè)到浮動(dòng)與流動(dòng)混合布局時(shí)會(huì)出現(xiàn)的各種怪現(xiàn)象，并積極做好兼容處理。
解決方法：可以在包含元素內(nèi)的最后一行添加一個(gè)清除元素，強(qiáng)制撐開(kāi)包含元素，使其包含浮動(dòng)元素。
示例如下：
瀏覽器效果圖：
本文章參考書(shū)籍：HTML5＋CSS3＋JavaScript從入門(mén)到精通（標(biāo)準(zhǔn)版）未來(lái)科技 編著
重慶分公司
重慶分公司
