css浮動有哪些案例

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

創新互聯從2013年創立，先為烏蘇等服務建站，烏蘇等地企業，進行企業商務咨詢服務。為烏蘇企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

left 元素向左浮動。

right 元素向右浮動。

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

inherit 規定應該從父元素繼承 float 屬性的值。

CSS float浮動布局

屬性值

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

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

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

也即：

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

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

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

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

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

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

方法一：采用css clear 屬性

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

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

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

方法二：BFC

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

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

元素浮動后會變為塊元素包括行元素如 span ，所以浮動后的元素可以設置寬高。

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

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

理解：使用形狀值來定義浮動區域的浮動，這將使得內聯內容會環繞著形狀，而不是產生浮動的邊框。

關鍵字屬性值

函數值屬性

url值

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

漸變值

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

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

clip-path 使用裁剪方式創建元素的可顯示區域。區域內的部分顯示，區域外的隱藏。且此方式原來的區域仍然存在，只是顯不顯示的問題。裁剪之后只有規定的區域可以顯示。

基本語法

其中：

CSS三大核心-浮動

1、標準流——標簽按照規定好默認方式排列

2、浮動

3、定位

多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

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

選擇器:{ float:屬性值}

1、 浮動的元素會脫離標準流（脫標），不再保留原來的位置

2、浮動的元素會一行內顯示并且元素頂部對齊

3、浮動的元素會具有行內塊元素的特性

1、為了約束浮動元素，一般采取的策略是：先用標準流的父元素排列上下位置，之后內部子元素采取浮動左右位置，符合網頁布局第一準則。

2、一個元素浮動了，理論上其余的兄弟元素也要浮動。浮動的盒子只會影響當前浮動盒子后面的標準流，不會影響前面的標準流

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

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

選擇器:{ clear :屬性值}

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

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

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

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

在CSS樣式中有關 float 浮動嵌套 問題

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

我們來看一個例子：

瀏覽器效果圖：

這時會發現父元素會自動調整自身的大小來包含子元素。

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

示例：

瀏覽器效果圖：

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

如果把浮動元素嵌入到流動元素之內，則父元素不能夠自適應子元素的高度，

如下示例：

瀏覽器效果圖：

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

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

示例如下：

瀏覽器效果圖：

本文章參考書籍：HTML5＋CSS3＋JavaScript從入門到精通（標準版）未來科技　編著

分享標題：css浮動樣式,css浮動布局代碼
本文鏈接：http://vcdvsql.cn/article8/dsdegop.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、外貿網站建設、網站制作、網站維護、軟件開發、動態網站

廣告

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