素顯示模式

display : block | none | inline | inline-block

display 屬性用來(lái)設(shè)置元素的顯示方式。

block塊對(duì)象指的是元素顯示為一個(gè)方塊，默認(rèn)顯示狀態(tài)下，它將占

據(jù)整行，其它的元素只能在下一行顯示。

inline行間對(duì)象與block剛好相反，它允許其它元素在同一行顯示。

none隱藏對(duì)象

元素的浮動(dòng)

float : none | left | right

float 屬性用來(lái)控制元素是否浮動(dòng)顯示。

left向左浮動(dòng)

right向右浮動(dòng)

none不浮動(dòng)

浮動(dòng)的時(shí)候元素的顯示屬性也變化了 變?yōu)?"行內(nèi)元素"

Css 布局

div 標(biāo)簽：

<div> </div>

div 與其它標(biāo)簽一樣，也是一個(gè)XHTML所支持的標(biāo)簽。

div 是XHTML中指定的，專門用于布局設(shè)計(jì)的容器標(biāo)簽。

在css布局方式中，div 是這種布局方式的核心對(duì)象，我們的頁(yè)面排版不再依賴于表格，僅從div的使用上說(shuō)，做一個(gè)簡(jiǎn)單的布局只需要兩樣?xùn)|西：div 與 css.因此我們稱這種布局方式為 div + css 布局。

<div id="header">頁(yè)面頭部</div>

<div id="content">

<div id="left"></div>

<div id="right"></div>

</div>

<div id="footer">頁(yè)腳</div>

盒模型就是指CSS布局中的每一個(gè)元素，在瀏覽器的解釋中，都被當(dāng)作一個(gè)盒狀物。

對(duì)我們來(lái)說(shuō)，只需要理解元素在頁(yè)面中所占據(jù)的位置。

ie6 / ie7 / firefox 的最終寬度 =左邊框?qū)?+ 左內(nèi)邊距 + 寬度 + 右內(nèi)邊距 + 右邊框?qū)?/p>

文檔流

文檔流是瀏覽器解析網(wǎng)頁(yè)的一個(gè)重要概念，對(duì)于一個(gè)XHTML網(wǎng)頁(yè)，body 元素下的任意元素，根

據(jù)其前后順序，組成了一個(gè)個(gè)上下關(guān)系，這便是文檔流。瀏覽器根據(jù)這些元素的順序去顯示它

們?cè)诰W(wǎng)頁(yè)中的位置。

文檔流是瀏覽器的默認(rèn)顯示規(guī)則。

深入浮動(dòng)

浮動(dòng)的目的

就是要打破文檔流的默認(rèn)顯示規(guī)則。如果要讓元素按照我們的布局要求進(jìn)行顯示。這時(shí)就要利

用float屬性。

1.任何申明為 float 的元素自動(dòng)被設(shè)置為一個(gè)"塊級(jí)元素"。

2.在標(biāo)準(zhǔn)瀏覽器中 浮動(dòng)元素脫離了文檔流 ，所以浮動(dòng)元素后的元素會(huì)占據(jù)浮動(dòng)元素本來(lái)應(yīng)該

所處的位置。

3.如果水平方向上沒(méi)有足夠的空間容納浮動(dòng)元素，則轉(zhuǎn)向下一行 。

4.文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍 。

5.浮動(dòng)元素只能浮動(dòng)至左側(cè)或者右側(cè) 。

清除浮動(dòng)

clear : none | left | right | both

none :默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象

left :不允許左邊有浮動(dòng)對(duì)象

right: 不允許右邊有浮動(dòng)對(duì)象

both :不允許有浮動(dòng)對(duì)象

程序員web前端學(xué)習(xí)路線分享CSS浮動(dòng)-清除浮動(dòng)篇，為什么要清除浮動(dòng)

這里所說(shuō)的清除浮動(dòng)，并不是不要浮動(dòng)了，而是清除浮動(dòng)與浮動(dòng)之間的影響。那么到底會(huì)有什么影響呢？

1．高度塌陷

舉個(gè)例子我們看一下。

我們?cè)谶@里設(shè)置了div0是外容器，div1是內(nèi)部容器，div1因?yàn)樵O(shè)置了寬高是100，所以顯示的時(shí)候就是一個(gè)橙色的100*100的方塊，但是div0僅設(shè)置了背景色，因?yàn)閐iv特有的獨(dú)占一行，寬度會(huì)自動(dòng)100%，高度被內(nèi)部容器div1撐開(kāi)了，撐開(kāi)的高度是100像素，所有看到一個(gè)綠色高100像素，寬度100%的容器

現(xiàn)在我們給div1設(shè)置浮動(dòng)

這時(shí)候我們發(fā)現(xiàn)div0這個(gè)外容器沒(méi)了，看不見(jiàn)了。。別急，我們?cè)赿iv0里打一些字看看

我們發(fā)現(xiàn)aaa這些文字出來(lái)了，環(huán)繞在橙色方塊周圍了，這個(gè)原因在浮動(dòng)中我們已經(jīng)講解了，而且我們也發(fā)現(xiàn)綠色的容器也出來(lái)了，但是它的高度僅僅是文字的行高。這就說(shuō)明，內(nèi)部的橙色塊設(shè)置浮動(dòng)后，它的父級(jí)容器綠色塊就不知道橙色容器的高度了，因此綠色容器的高度變成了0，寫入文字后，綠色容器重新被撐開(kāi)高度才可以看到。我們把這種情況稱為高度塌陷。

我們其實(shí)是希望一個(gè)容器中的內(nèi)容不斷的撐開(kāi)容器的高度，這樣我們后續(xù)的內(nèi)容就可以緊貼在上面了，而網(wǎng)頁(yè)中的內(nèi)容并不是都是靜態(tài)的，很多都需要每天更新，更新的內(nèi)容多少，圖片高度，都不相同。那么后面的東西想要緊貼上面的內(nèi)容，上面內(nèi)容的高度就不能設(shè)置一個(gè)固定數(shù)值，否則很多數(shù)據(jù)的時(shí)候放不下。如果不設(shè)置高度，一旦設(shè)置浮動(dòng)后，就會(huì)出現(xiàn)高度塌陷。丟失了高度后，頁(yè)面后續(xù)的內(nèi)容就會(huì)插在上面內(nèi)容的底部，頁(yè)面就會(huì)錯(cuò)亂，因此我們就需要做清除浮動(dòng)來(lái)解決這個(gè)問(wèn)題，最終做到即使使用浮動(dòng)，外容器也會(huì)因?yàn)閮?nèi)容的多少自動(dòng)撐開(kāi)高度，不會(huì)高度塌陷。

margin padding設(shè)置值不能正確顯示

2．Margin和padding屬性值不正確

由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。

要來(lái)解決這個(gè)問(wèn)題，我們就必須來(lái)認(rèn)識(shí)一下BFC

什么是BFC

要來(lái)理解BFC，先介紹一下Box和Formatting Context

Box 是 CSS 布局的對(duì)象和基本單位， 簡(jiǎn)單來(lái)說(shuō)頁(yè)面就是由Box組成，元素的類型和 display 屬性，決定了這個(gè) Box 的類型。 不同類型的 Box， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染。

1、block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block formatting context；

2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box。并且參與 inline formatting context；

3、run-in box: css3 中才有， 這兒先不講了。

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)。

BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

BFC布局規(guī)則：

（1）內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

（2）Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

（3）每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。

（4）BFC的區(qū)域不會(huì)與float box重疊。

（5）BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

（6）計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

瞧，最后一條就是我們需要利用的了，我們只需要利用BFC就可以解決浮動(dòng)后外容器高度塌陷的問(wèn)題

如何生成BFC

1. 根元素是BFC模式

這種不能考慮，因?yàn)槎疾皇歉?/p>

2. 設(shè)置高度

顯然也是不可以的。

3. float屬性不為none

本來(lái)就要設(shè)置浮動(dòng)的。所以也不考慮

4. position為absolute或fixed

這樣設(shè)置后，就失去浮動(dòng)的意義了。因此也不使用

5. display為inline-block, table-cell, table-caption, flex, inline-flex

雖然可以開(kāi)啟，但是導(dǎo)致父元素原有寬度丟失

6. overflow不為visible

這種方法副作用比較小，但是還是有問(wèn)題的。比如overflow設(shè)置為hidden，這個(gè)不行，內(nèi)容的高度是撐開(kāi)的寬度也不能確定。設(shè)置為scroll，會(huì)出現(xiàn)右邊和下邊的滾動(dòng)條寬度

設(shè)置為auto最合適，不過(guò)，如果里面的內(nèi)容使用了定位，并且超出去就會(huì)出現(xiàn)滾動(dòng)條。所以只能保證內(nèi)容不能有定位。

Clear:both

清除：兩者間，顧名思義就是清除浮動(dòng)

我們看到如果要使用clear:both，就需要給高度塌陷的容器里面最后追加一個(gè)div，并且給這個(gè)div設(shè)置為clear：both，我們發(fā)現(xiàn)這種使用方法比較麻煩，每次設(shè)置都需要最后增加div。

因此我們做了一個(gè)修改

<!DOCTYPE html>

我們知道css中最重要的就是浮動(dòng)了，一張網(wǎng)頁(yè)結(jié)構(gòu)布局，用的最多的就是浮動(dòng)了，現(xiàn)在大多數(shù)的網(wǎng)站網(wǎng)頁(yè)結(jié)構(gòu)都是浮動(dòng)布局了，不像早些年的表格布局。所以學(xué)好浮動(dòng)對(duì)我們的開(kāi)發(fā)很重要。

浮動(dòng)是什么？可能很多人的理解都不一樣，我們來(lái)看看w3c對(duì)浮動(dòng)的解釋是什么

大多數(shù)小伙伴聽(tīng)得最多的可能就是浮動(dòng)流，下面我們就來(lái)講講什么是浮動(dòng)流以及清除浮動(dòng)。

首先，我們知道，在一張網(wǎng)頁(yè)中的正常布局流向（排列方式）都是從左到右，從上到下的方式排列。這個(gè)我們稱之為標(biāo)準(zhǔn)文檔流。那什么是浮動(dòng)流呢？

浮動(dòng)浮動(dòng)浮動(dòng) ==> 因?yàn)橛袀€(gè)浮字，我們可以理解為浮起來(lái)了一樣。就好比標(biāo)準(zhǔn)文檔流在地下排流，浮動(dòng)流在天空上排流。簡(jiǎn)單看個(gè)例子。

這是兩個(gè)正常排列的div，div獨(dú)占一行，就不用多說(shuō)了吧。然后我們給小的方塊加一個(gè)浮動(dòng)

然后我們?cè)倏葱Ч?/p>

然后我們就看到大方塊在小方塊下面，因?yàn)樾》綁K跑天上去了，它就不占據(jù)原來(lái)的位置，會(huì)把那個(gè)位置空出來(lái)，所以大方塊會(huì)竄上去，就看起來(lái)兩個(gè)方塊重疊了。

在看另外一個(gè)例子，子級(jí)浮動(dòng)，父級(jí)高度撐不開(kāi)的問(wèn)題，這也是浮動(dòng)帶來(lái)的一個(gè)不好的影響，平常寫代碼的時(shí)候會(huì)經(jīng)常遇到這個(gè)。

一個(gè)ul標(biāo)簽，下面兩個(gè)li標(biāo)簽，然后給ul加一個(gè)邊框 便于觀看。

保存運(yùn)行看下正常效果

然后我們給li標(biāo)簽浮動(dòng)

效果如下

這下我們看到ul的高度沒(méi)有了，上下邊框緊緊挨著，這就是剛剛上面說(shuō)的浮起來(lái)的狀況，因?yàn)樽蛹?jí)li標(biāo)簽浮動(dòng)起來(lái)了，它不占據(jù)原來(lái)的位置，它已經(jīng)在天上了，所以它的父級(jí)ul標(biāo)簽包不住它，撐不起來(lái)高度，才會(huì)產(chǎn)生這種狀況。

那我們要怎么解決這種現(xiàn)象呢。就是清除浮動(dòng)。

大致分為4種方案：

1、在并列的子元素，最后加一個(gè)元素，給他加clear：both

2、給父子加一個(gè)class： clearfix

.clearfix::after{

content: '';

clear: both;

display: block;

}

3、讓父級(jí)觸發(fā)BFC效果

position:absolute

display:inline-block

float：left|right

overflow：hidden

4、如何浮動(dòng)的父級(jí)本身就是浮動(dòng)元素嗎，那么不用清除浮動(dòng)了

咱們就來(lái)給父級(jí)觸發(fā)BFC效果看一下。

看效果

現(xiàn)在父級(jí)就把子級(jí)包裹住了，高度也有了。

有什么問(wèn)題可以點(diǎn)一下關(guān)注，私信小編。