CSS三大核心-浮動

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

創(chuàng)新互聯(lián)是一家專業(yè)提供虞城企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、網(wǎng)站設計、H5頁面制作、小程序制作等業(yè)務。10年已為虞城眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

2、浮動

3、定位

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

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

選擇器:{ float:屬性值}

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

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

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

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

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

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

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

選擇器:{ clear :屬性值}

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

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

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

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

float（CSS浮動）

1、浮動元素會完全脫離文檔流，不再占據(jù)文檔流中的位置

2、設置浮動以后元素會向父元素的左側(cè)或右側(cè)移動，

3、浮動元素默認不會從父元素中移出

4、浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素

5、如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移

6、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高

在浮動布局中，父元素的高度默認是被子元素撐開的，當子元素浮動后，其會完全脫離文檔流，子元素從文檔流中脫離， 將會無法撐起父元素的高度，導致父元素的高度丟失。

父元素高度丟失以后，其下的元素會自動上移，導致頁面的布局混亂，所以高度塌陷是浮動布局中比較常見的一個問題，這個問題我們必須要進行處理！

思想：在父元素的后面加內(nèi)容，內(nèi)容利用clear清除浮動元素帶來的影響

CSS float浮動布局

屬性值

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

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

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

也即：

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

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

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

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

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

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

方法一：采用css clear 屬性

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

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

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

方法二：BFC

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

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

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

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

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

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

關鍵字屬性值

函數(shù)值屬性

url值

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

漸變值

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

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

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

基本語法

其中：

css中什么是浮動

浮動 --

!-- 塊元素在文檔流中默認垂直排列

如果希望塊元素在頁面中水平排列

可以是其脫離文檔流

使用float來使元素浮動，從而脫離文檔流

可選值：

none:默認值，認在文檔流中排列

left:像左浮動

right:向右浮動

元素浮動以后，會盡量向頁面的左上和右上浮動，

知道遇到父元素的邊框

**如果浮動元素上邊是個沒有浮動的

塊元素，則浮動元素不會超過他

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

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

我們來看一個例子：

瀏覽器效果圖：

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

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

示例：

瀏覽器效果圖：

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

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

如下示例：

瀏覽器效果圖：

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

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

示例如下：

瀏覽器效果圖：

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

標題名稱：css浮動樣式,css浮動樣式如何書寫
文章出自：http://chinadenli.net/article18/dsgjdgp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、全網(wǎng)營銷推廣、Google、品牌網(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)