css浮動有哪些案例

案例？是說float: ; 都有什么嗎？

創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為烏蘇等服務(wù)建站，烏蘇等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為烏蘇企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

left 元素向左浮動。

right 元素向右浮動。

none 默認值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。

inherit 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。

CSS float浮動布局

屬性值

float 是最開始出現(xiàn)的一種布局方式，主要解決：文本在圖像周圍環(huán)繞，也即應(yīng)用于圖像。但是在css中，任何元素都可以浮動， 浮動元素會生成一個塊級框 ，而不論它本身是何種元素。

元素一般是處于普通流中，也即塊級元素獨占一行，從上往下依次顯示布局。行級元素可以在一行顯示多個，按照順序進行顯示布局。

而添加了 float 布局的元素則會脫離原來所在的文檔流。并 ‘漂浮’ 在當(dāng)前所在的文檔流的位置（如果前一個元素沒有添加 float 布局的情況下），由于當(dāng)前元素文檔流實際上沒有被元素占用，因此當(dāng)前元素之后的元素會按照普通流布局的方式，占用當(dāng)前元素的文檔流。表現(xiàn)為： 丟失空間

也即：

此時由于第一個元素添加了 float:left ，則脫離了原來的文檔流，后面元素會向上移動，占用第一個元素的空間。

如果第二個元素也添加了 float ，那么可以這樣去思考，由于第一個元素的原因，第二個元素所處的文檔流變成了第一個元素所處的文檔流，此時再給第二個元素添加 float ，那么也會像第一個元素一樣，脫離當(dāng)前的文檔流，使得當(dāng)前元素和第一個元素一樣處于 '漂浮' 狀態(tài)，并緊跟著第一個元素顯示一排。

同樣，如果第二個元素后面還有其他元素，那么也會向上移動，改變原來所處的文檔流位置。

注意：添加了 float 的元素，只是在會脫離當(dāng)前所在的文檔流，但是仍然漂浮在當(dāng)前文檔流 上一層 ，而不是說直接脫離整個文檔流，跑到所有文檔流的最頂部 。

從上面案例可以看出，添加了浮動的元素會影響其后元素的布局。此外由于元素脫離原來的文檔流，且父盒子沒有添加高度屬性，那么父盒子無法感知到子盒子的存在，因此父盒子不會被撐開。

知道了 float 帶來的不好的地方，則需要去清除浮動帶來的影響。

方法一：采用css clear 屬性

將該屬性添加在被浮動影響的后面元素，即可以清除浮動

則受浮動影響的元素就可以正常顯示了

因此在受浮動影響的父元素，就可以利用此方法，在浮動元素之后新增加一個元素，使新增加的元素清除浮動，這樣新增加的元素的位置就在浮動元素的下面，使得在一定程度上實現(xiàn)了撐開盒子的作用。

方法二：BFC

其次還可以采用BFC，使得父元素形成獨立的空間，也即可以感知子元素的高度和寬度，在一定程度上也不會影響外面的元素的布局。

浮動元素邊界不能超過父元素的padding

元素浮動后會變?yōu)閴K元素包括行元素如 span ，所以浮動后的元素可以設(shè)置寬高。

通過形狀浮動可以讓內(nèi)容圍繞圖片，類似于我們在word 中的環(huán)繞排版。要求圖片是有透明度的PNG格式。

shape-outside 定義了一個可以是非矩形的形狀，相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)圍繞該形狀進行包裝。默認情況下，內(nèi)聯(lián)內(nèi)容包圍其邊框， shape-outside 提供了一種自定義此包裝的方法，可以將文本包裝在復(fù)雜對象周圍而不是簡單的框中。

理解：使用形狀值來定義浮動區(qū)域的浮動，這將使得內(nèi)聯(lián)內(nèi)容會環(huán)繞著形狀，而不是產(chǎn)生浮動的邊框。

關(guān)鍵字屬性值

函數(shù)值屬性

url值

文字通過給定的圖片，并且通過計算圖片的透明度后獲取的形狀區(qū)域進行圍繞，這里需要注意的是此效果必須在服務(wù)器端預(yù)覽，本地預(yù)覽會報圖片跨域問題，給定的圖片必須是有透明區(qū)域的圖片

漸變值

按照給定的漸變通過計算排除透明通道后得到的形狀，然后文字按照此形狀的邊緣進行環(huán)繞

最后：函數(shù)值/url/linear-gradient可以和關(guān)鍵字屬性值搭配使用，此時關(guān)鍵字屬性作為基本形狀提供相應(yīng)的參考框盒。

clip-path 使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。且此方式原來的區(qū)域仍然存在，只是顯不顯示的問題。裁剪之后只有規(guī)定的區(qū)域可以顯示。

基本語法

其中：

CSS三大核心-浮動

1、標(biāo)準(zhǔn)流——標(biāo)簽按照規(guī)定好默認方式排列

2、浮動

3、定位

多個塊級元素縱向排列找標(biāo)準(zhǔn)流，多個塊級元素橫向排列找浮動。

float屬性用于創(chuàng)建浮動框，將其移動到一邊，直到左邊或者右邊邊緣及包含塊或另一個浮動框的邊緣。

選擇器:{ float:屬性值}

1、 浮動的元素會脫離標(biāo)準(zhǔn)流（脫標(biāo)），不再保留原來的位置

2、浮動的元素會一行內(nèi)顯示并且元素頂部對齊

3、浮動的元素會具有行內(nèi)塊元素的特性

1、為了約束浮動元素，一般采取的策略是：先用標(biāo)準(zhǔn)流的父元素排列上下位置，之后內(nèi)部子元素采取浮動左右位置，符合網(wǎng)頁布局第一準(zhǔn)則。

2、一個元素浮動了，理論上其余的兄弟元素也要浮動。浮動的盒子只會影響當(dāng)前浮動盒子后面的標(biāo)準(zhǔn)流，不會影響前面的標(biāo)準(zhǔn)流

父級盒子不給高度，自己盒子會撐開父級盒子高度，但是加上浮動就會無效。

額外標(biāo)簽法也稱為隔墻法，是W3C推薦的做法。會在浮動元素的末尾添加一個空的標(biāo)簽。例如：div style="chear:both"/div。新的標(biāo)簽必須是塊級元素。

選擇器:{ clear :屬性值}

實際工作中幾乎只用clear :both 。清除浮動的策略是閉合浮動，只讓浮動在父級盒子內(nèi)部影響。

可以給父級添加overflow屬性，將其屬性值設(shè)置為hidden、auto或scroll。這個屬性還用于外邊距合并。 ? 缺點就是無法顯示溢出部分。

:after偽元素法相當(dāng)于額外標(biāo)簽法的升級版，也是在浮動元素尾部添加空的塊級元素，用法是給父元素添加屬性。以下為固定格式。

類似于:after 偽元素法，只不過前后都會插入一個盒子，更符合閉合的概念。

在CSS樣式中有關(guān) float 浮動嵌套 問題

浮動元素可以相互嵌套，嵌套規(guī)律與流動元素的嵌套相同。浮動的包含元素（父元素）總會自動調(diào)整自身的高度和寬度以實現(xiàn)對浮動元素的包含。

我們來看一個例子：

瀏覽器效果圖：

這時會發(fā)現(xiàn)父元素會自動調(diào)整自身的大小來包含子元素。

如果包含元素定義了高度和寬度則他不會隨子元素的大小而自動調(diào)整自身顯示區(qū)域來適應(yīng)子元素的顯示。注意，在IE6及更低版本瀏覽器中包含框仍然能夠自動調(diào)整自身大小來適應(yīng)子元素的顯示大小，不過在IE7版本中微軟糾正了這個不符合標(biāo)準(zhǔn)的顯示方法。如下

示例：

瀏覽器效果圖：

默認狀態(tài)下溢出不隱藏，我們可以添加 樣式 overflow:hidden; 隱藏多余的部分或overflow: scroll; 多余部分顯示滾動條。

如果把浮動元素嵌入到流動元素之內(nèi)，則父元素不能夠自適應(yīng)子元素的高度，

如下示例：

瀏覽器效果圖：

在上圖中可以看到包含元素div并，沒用顯示。原因就是包含元素沒有適應(yīng)子元素的高度，而是根據(jù)自身定義的屬性以獨立的形式顯示（父元素沒有被撐開，僅收縮成一條直線顯示）。所以，在應(yīng)用混合嵌套式，要預(yù)測到浮動與流動混合布局時會出現(xiàn)的各種怪現(xiàn)象，并積極做好兼容處理。

解決方法：可以在包含元素內(nèi)的最后一行添加一個清除元素，強制撐開包含元素，使其包含浮動元素。

示例如下：

瀏覽器效果圖：

本文章參考書籍：HTML5＋CSS3＋JavaScript從入門到精通（標(biāo)準(zhǔn)版）未來科技　編著

分享標(biāo)題：css浮動樣式,css浮動布局代碼
本文鏈接：http://chinadenli.net/article8/dsdegop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站維護、軟件開發(fā)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)