CSS布局相關(guān)——盒模型和浮動

在CSS中，所有元素被“ 盒子 ”所包圍，利用盒模型的基本原理來實現(xiàn)CSS準確布局，元素排列等處理

創(chuàng)新互聯(lián)建站為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計服務(wù)，主要包括成都網(wǎng)站建設(shè)、做網(wǎng)站、App定制開發(fā)、小程序定制開發(fā)、宣傳片制作、LOGO設(shè)計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗豐富的經(jīng)驗，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。 

CSS廣泛使用的兩種盒子，其在頁面流和元素之間的關(guān)系表現(xiàn)為不同的行為：

對于定義為塊級盒子（block）的元素會表現(xiàn)出以下行為：

對于定義為內(nèi)聯(lián)盒子（inline）的元素會表現(xiàn)出以下行為：

通過對盒子設(shè)置display的屬性值，來控制盒子的外部顯示類型

外部顯示類型與內(nèi)部顯示類型

外部顯示類型：決定盒子是塊級還是內(nèi)聯(lián)，即決定了盒子之間的布局方式

內(nèi)部顯示類型：決定了盒子內(nèi)部的元素是如何布局的，默認情況是按照正常文檔流布局，也可以通過設(shè)置display值為flex和grid來改變內(nèi)部元素之間的布局方式

不同顯示類型的例子

block：

圖中段落里的 span word /span 被設(shè)置為 display：block

因此其獨占一行，寬度填滿整個父元素

flex：

圖中的列表被設(shè)置為 display：block ，每個列表是一個塊級元素 —— 像段落一樣 —— 會充滿整個容器的寬度并且換行

inline-flex與inline

圖中的列表被設(shè)置為 display：inline-flex ，使得在一些flex元素外創(chuàng)建一個內(nèi)聯(lián)框

最后設(shè)置兩個段落為 display: inline ， inline flex 容器和兩個段落在同一行上，而不是像塊級元素一樣換行

CSS組成一個盒模型需要以下幾個部分：

在標(biāo)準模型中，如果你給盒設(shè)置 width 和 height，實際設(shè)置的是 content box。 padding 和 border 再加上設(shè)置的寬高一起決定整個盒子的大小

如果使用標(biāo)準模型寬度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box

如果使用替代模型，一切都將變得簡單很多，此時的 width 和 height 就是盒子可見的寬度與高度，無論怎么改變 padding 或 border 的值，都會通過壓縮 conten box 的大小來保持 width 和 height 的值不變

如需使用，只需要聲明以下CSS樣式：

外邊距是盒子周圍一圈看不到的空間。它會把其他元素從盒子旁邊推開。 外邊距屬性值可以為正也可以為負。設(shè)置負值會導(dǎo)致和其他內(nèi)容重疊。無論使用標(biāo)準模型還是替代模型，外邊距總是在計算可見部分后額外添加

CSS：

html：

結(jié)果如下：因為上外邊距設(shè)置為負值，所以兩個邊框會重疊

外邊距折疊

理解外邊距的一個關(guān)鍵是外邊距折疊的概念。如果你有兩個外邊距相接的元素，這些外邊距將合并為一個外邊距，即最大的單個外邊距的大小

結(jié)果如下，中間間隔的部分為50px

如下圖所示，對內(nèi)聯(lián)盒子設(shè)置 width 和 height 都不會生效，雖然margin，padding和border會生效，但不會改變與其它內(nèi)聯(lián)盒子的關(guān)系，因此其內(nèi)邊距和邊框會與段落的其它元素重疊

要避免上述情況，只需要將內(nèi)聯(lián)盒子的display值設(shè)置為inline-block即可

設(shè)置之后的效果為：

但因其保留有inline的特征，所以它不會跳轉(zhuǎn)到新行

float可以使得當(dāng)前元素脫離正常文本流，并吸附到父元素的左邊（left）或者右邊（right）正常布局中位于該浮動元素之下的內(nèi)容，此時會圍繞著浮動元素進行排列

基本的常見用途在于圖片與文字環(huán)繞排版以及首字母下沉：

重點是這個，元素浮動具有一定的規(guī)則與限制

設(shè)置如下三個盒子（均以塊級元素方式呈現(xiàn)）：

將box1設(shè)置為向右浮動：

因為box1脫離正常文檔流，所以box2和box3會向上填補box1的空位，box1浮動到父元素（body）的最右邊

設(shè)置box1向左浮動：

同理，box1脫離正常文檔流，box2與box3向上填補box1的空位，此時box1浮動到父元素（body）的最左邊，所以會覆蓋掉box2（浮動元素在正常流文檔的上方）

設(shè)置box2向左浮動：

可以看到box3因為box2脫離正常文檔流而向上填充其空位，box2因為浮動到左邊覆蓋了box3，然而box1仍處于正常文檔流中，并且在html文件中最先聲明，所以box2只能在box1的下方進行浮動（即使box2設(shè)置為向右浮動也是一樣）

設(shè)置box1、box2與box3都向左浮動：

可以看到三個盒子均向左浮動，直到碰到前一個浮動框的邊緣為止（對于box1來說是碰到父元素的邊緣），因此呈現(xiàn)如此的排列狀況

如果當(dāng)父元素太窄，無法包含三個盒子的寬度，則無法容納的元素向下移動，直到有足夠的空間使得其能向某個方向浮動，如下圖所示：

如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”

相關(guān)參考：

浮動的規(guī)則先討論到此

高度塌陷

在父元素container內(nèi)設(shè)置一個盒子box1，此時沒有設(shè)置浮動，box1會撐起父元素container的高度

如果此時設(shè)置box1浮動，因為其脫離了正常文檔流，無法撐起盒子的高度，所以將發(fā)生高度塌陷：

為了解決這個問題，在此提供三種方法：

1. 添加額外標(biāo)簽

首先在父元素內(nèi)添加空白內(nèi)容的額外標(biāo)簽clearfix

然后再CSS規(guī)則中添加以下內(nèi)容：

通過清除父元素內(nèi)空白元素的浮動，使得父元素邊框重新包含浮動內(nèi)容

2. 父級元素添加overflow屬性

直接在父元素內(nèi)添加overflow屬性：

同樣可以清除浮動，結(jié)果如下：

3. after偽元素

html文檔改為：

在CSS規(guī)則里添加：

div css float浮動用法(left right)

float是浮動，翻譯成中文也是浮動意思。進入對應(yīng)css手冊中float手冊了解float基本信息。

float的作用：通過css定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

float語法 ：

Float常跟屬性值left、right、none

Float:none 不使用浮動

Float:left 靠左浮動

Float:right 靠右浮動

Float浮動用于設(shè)置對象靠左與靠右浮動樣式，可以實現(xiàn)我們所需要的讓DIV、SPAN等標(biāo)簽居左居右浮動。

簡單使用語法

div{float:left} /* css注釋：設(shè)置div對象浮動靠左（left） */

div{float:right} /* css注釋：設(shè)置div對象浮動靠右(right) */

css中什么是浮動

浮動 --

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

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

可以是其脫離文檔流

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

可選值：

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

left:像左浮動

right:向右浮動

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

知道遇到父元素的邊框

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

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

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浮動有哪些案例

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

left 元素向左浮動。

right 元素向右浮動。

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

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

網(wǎng)站名稱：css樣式浮動,css樣式左浮動
網(wǎng)站地址：http://aaarwkj.com/article0/dsisjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、Google、網(wǎng)站設(shè)計、外貿(mào)建站、網(wǎng)站內(nè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)