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

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

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

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

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

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

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

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

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

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

不同顯示類型的例子

block：

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

因此其獨(dú)占一行，寬度填滿整個(gè)父元素

flex：

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

inline-flex與inline

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

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

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

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

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

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

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

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

CSS：

html：

結(jié)果如下：因?yàn)樯贤膺吘嘣O(shè)置為負(fù)值，所以兩個(gè)邊框會(huì)重疊

外邊距折疊

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

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

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

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

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

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

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

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

重點(diǎn)是這個(gè)，元素浮動(dòng)具有一定的規(guī)則與限制

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

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

因?yàn)閎ox1脫離正常文檔流，所以box2和box3會(huì)向上填補(bǔ)box1的空位，box1浮動(dòng)到父元素（body）的最右邊

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

同理，box1脫離正常文檔流，box2與box3向上填補(bǔ)box1的空位，此時(shí)box1浮動(dòng)到父元素（body）的最左邊，所以會(huì)覆蓋掉box2（浮動(dòng)元素在正常流文檔的上方）

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

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

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

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

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

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

相關(guān)參考：

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

高度塌陷

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

如果此時(shí)設(shè)置box1浮動(dòng)，因?yàn)槠涿撾x了正常文檔流，無法撐起盒子的高度，所以將發(fā)生高度塌陷：

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

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

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

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

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

2. 父級(jí)元素添加overflow屬性

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

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

3. after偽元素

html文檔改為：

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

div css float浮動(dòng)用法(left right)

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

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

float語法 ：

Float常跟屬性值left、right、none

Float:none 不使用浮動(dòng)

Float:left 靠左浮動(dòng)

Float:right 靠右浮動(dòng)

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

簡(jiǎn)單使用語法

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

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

css中什么是浮動(dòng)

浮動(dòng) --

!-- 塊元素在文檔流中默認(rèn)垂直排列

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

可以是其脫離文檔流

使用float來使元素浮動(dòng)，從而脫離文檔流

可選值：

none:默認(rèn)值，認(rèn)在文檔流中排列

left:像左浮動(dòng)

right:向右浮動(dòng)

元素浮動(dòng)以后，會(huì)盡量向頁面的左上和右上浮動(dòng)，

知道遇到父元素的邊框

**如果浮動(dòng)元素上邊是個(gè)沒有浮動(dòng)的

塊元素，則浮動(dòng)元素不會(huì)超過他

CSS float浮動(dòng)布局

屬性值

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

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

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

也即：

此時(shí)由于第一個(gè)元素添加了 float:left ，則脫離了原來的文檔流，后面元素會(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è)瓉硭幍奈臋n流位置。

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

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

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

方法一：采用css clear 屬性

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

則受浮動(dòng)影響的元素就可以正常顯示了

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

方法二：BFC

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

浮動(dòng)元素邊界不能超過父元素的padding

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

通過形狀浮動(dòng)可以讓內(nè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ì)象周圍而不是簡(jiǎn)單的框中。

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

關(guān)鍵字屬性值

函數(shù)值屬性

url值

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

漸變值

按照給定的漸變通過計(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ū)域外的隱藏。且此方式原來的區(qū)域仍然存在，只是顯不顯示的問題。裁剪之后只有規(guī)定的區(qū)域可以顯示。

基本語法

其中：

css浮動(dòng)有哪些案例

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

left 元素向左浮動(dòng)。

right 元素向右浮動(dòng)。

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

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

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、Google、網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)站內(nèi)鏈、商城網(wǎng)站

廣告

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