整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
素顯示模式
display : block | none | inline | inline-block
display 屬性用來設置元素的顯示方式。
block塊對象指的是元素顯示為一個方塊，默認顯示狀態下，它將占
據整行，其它的元素只能在下一行顯示。
inline行間對象與block剛好相反，它允許其它元素在同一行顯示。
none隱藏對象
元素的浮動
float : none | left | right
float 屬性用來控制元素是否浮動顯示。
left向左浮動
right向右浮動
none不浮動
浮動的時候元素的顯示屬性也變化了 變為 "行內元素"
Css 布局
div 標簽：
<div> </div>
div 與其它標簽一樣，也是一個XHTML所支持的標簽。
div 是XHTML中指定的，專門用于布局設計的容器標簽。
在css布局方式中，div 是這種布局方式的核心對象，我們的頁面排版不再依賴于表格，僅從div的使用上說，做一個簡單的布局只需要兩樣東西：div 與 css.因此我們稱這種布局方式為 div + css 布局。
<div id="header">頁面頭部</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">頁腳</div>
盒模型就是指CSS布局中的每一個元素，在瀏覽器的解釋中，都被當作一個盒狀物。
對我們來說，只需要理解元素在頁面中所占據的位置。
ie6 / ie7 / firefox 的最終寬度 =左邊框寬 + 左內邊距 + 寬度 + 右內邊距 + 右邊框寬
文檔流
文檔流是瀏覽器解析網頁的一個重要概念，對于一個XHTML網頁，body 元素下的任意元素，根
據其前后順序，組成了一個個上下關系，這便是文檔流。瀏覽器根據這些元素的順序去顯示它
們在網頁中的位置。
文檔流是瀏覽器的默認顯示規則。
深入浮動
浮動的目的
就是要打破文檔流的默認顯示規則。如果要讓元素按照我們的布局要求進行顯示。這時就要利
用float屬性。
1.任何申明為 float 的元素自動被設置為一個"塊級元素"。
2.在標準瀏覽器中 浮動元素脫離了文檔流 ，所以浮動元素后的元素會占據浮動元素本來應該
所處的位置。
3.如果水平方向上沒有足夠的空間容納浮動元素，則轉向下一行 。
4.文字內容會圍繞在浮動元素周圍 。
5.浮動元素只能浮動至左側或者右側 。
清除浮動
clear : none | left | right | both
none :默認值。允許兩邊都可以有浮動對象
left :不允許左邊有浮動對象
right: 不允許右邊有浮動對象
both :不允許有浮動對象
程序員web前端學習路線分享CSS浮動-清除浮動篇，為什么要清除浮動
這里所說的清除浮動，并不是不要浮動了，而是清除浮動與浮動之間的影響。那么到底會有什么影響呢？
1．高度塌陷
舉個例子我們看一下。
我們在這里設置了div0是外容器，div1是內部容器，div1因為設置了寬高是100，所以顯示的時候就是一個橙色的100*100的方塊，但是div0僅設置了背景色，因為div特有的獨占一行，寬度會自動100%，高度被內部容器div1撐開了，撐開的高度是100像素，所有看到一個綠色高100像素，寬度100%的容器
現在我們給div1設置浮動
這時候我們發現div0這個外容器沒了，看不見了。。別急，我們在div0里打一些字看看
我們發現aaa這些文字出來了，環繞在橙色方塊周圍了，這個原因在浮動中我們已經講解了，而且我們也發現綠色的容器也出來了，但是它的高度僅僅是文字的行高。這就說明，內部的橙色塊設置浮動后，它的父級容器綠色塊就不知道橙色容器的高度了，因此綠色容器的高度變成了0，寫入文字后，綠色容器重新被撐開高度才可以看到。我們把這種情況稱為高度塌陷。
我們其實是希望一個容器中的內容不斷的撐開容器的高度，這樣我們后續的內容就可以緊貼在上面了，而網頁中的內容并不是都是靜態的，很多都需要每天更新，更新的內容多少，圖片高度，都不相同。那么后面的東西想要緊貼上面的內容，上面內容的高度就不能設置一個固定數值，否則很多數據的時候放不下。如果不設置高度，一旦設置浮動后，就會出現高度塌陷。丟失了高度后，頁面后續的內容就會插在上面內容的底部，頁面就會錯亂，因此我們就需要做清除浮動來解決這個問題，最終做到即使使用浮動，外容器也會因為內容的多少自動撐開高度，不會高度塌陷。
margin padding設置值不能正確顯示
2．Margin和padding屬性值不正確
由于浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。
要來解決這個問題，我們就必須來認識一下BFC
什么是BFC
要來理解BFC，先介紹一下Box和Formatting Context
Box 是 CSS 布局的對象和基本單位， 簡單來說頁面就是由Box組成，元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。
1、block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block formatting context；
2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
3、run-in box: css3 中才有， 這兒先不講了。
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
BFC布局規則：
（1）內部的Box會在垂直方向，一個接一個地放置。
（2）Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
（3）每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
（4）BFC的區域不會與float box重疊。
（5）BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
（6）計算BFC的高度時，浮動元素也參與計算
瞧，最后一條就是我們需要利用的了，我們只需要利用BFC就可以解決浮動后外容器高度塌陷的問題
如何生成BFC
1. 根元素是BFC模式
這種不能考慮，因為都不是根元素
2. 設置高度
顯然也是不可以的。
3. float屬性不為none
本來就要設置浮動的。所以也不考慮
4. position為absolute或fixed
這樣設置后，就失去浮動的意義了。因此也不使用
5. display為inline-block, table-cell, table-caption, flex, inline-flex
雖然可以開啟，但是導致父元素原有寬度丟失
6. overflow不為visible
這種方法副作用比較小，但是還是有問題的。比如overflow設置為hidden，這個不行，內容的高度是撐開的寬度也不能確定。設置為scroll，會出現右邊和下邊的滾動條寬度
設置為auto最合適，不過，如果里面的內容使用了定位，并且超出去就會出現滾動條。所以只能保證內容不能有定位。
Clear:both
清除：兩者間，顧名思義就是清除浮動
我們看到如果要使用clear:both，就需要給高度塌陷的容器里面最后追加一個div，并且給這個div設置為clear：both，我們發現這種使用方法比較麻煩，每次設置都需要最后增加div。
因此我們做了一個修改
<!DOCTYPE html>
我們知道css中最重要的就是浮動了，一張網頁結構布局，用的最多的就是浮動了，現在大多數的網站網頁結構都是浮動布局了，不像早些年的表格布局。所以學好浮動對我們的開發很重要。
浮動是什么？可能很多人的理解都不一樣，我們來看看w3c對浮動的解釋是什么
大多數小伙伴聽得最多的可能就是浮動流，下面我們就來講講什么是浮動流以及清除浮動。
首先，我們知道，在一張網頁中的正常布局流向（排列方式）都是從左到右，從上到下的方式排列。這個我們稱之為標準文檔流。那什么是浮動流呢？
浮動浮動浮動 ==> 因為有個浮字，我們可以理解為浮起來了一樣。就好比標準文檔流在地下排流，浮動流在天空上排流。簡單看個例子。
這是兩個正常排列的div，div獨占一行，就不用多說了吧。然后我們給小的方塊加一個浮動
然后我們再看效果
然后我們就看到大方塊在小方塊下面，因為小方塊跑天上去了，它就不占據原來的位置，會把那個位置空出來，所以大方塊會竄上去，就看起來兩個方塊重疊了。
在看另外一個例子，子級浮動，父級高度撐不開的問題，這也是浮動帶來的一個不好的影響，平常寫代碼的時候會經常遇到這個。
一個ul標簽，下面兩個li標簽，然后給ul加一個邊框 便于觀看。
保存運行看下正常效果
然后我們給li標簽浮動
效果如下
這下我們看到ul的高度沒有了，上下邊框緊緊挨著，這就是剛剛上面說的浮起來的狀況，因為子級li標簽浮動起來了，它不占據原來的位置，它已經在天上了，所以它的父級ul標簽包不住它，撐不起來高度，才會產生這種狀況。
那我們要怎么解決這種現象呢。就是清除浮動。
大致分為4種方案：
1、在并列的子元素，最后加一個元素，給他加clear：both
2、給父子加一個class： clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
3、讓父級觸發BFC效果
position:absolute
display:inline-block
float：left|right
overflow：hidden
4、如何浮動的父級本身就是浮動元素嗎，那么不用清除浮動了
咱們就來給父級觸發BFC效果看一下。
看效果
現在父級就把子級包裹住了，高度也有了。
有什么問題可以點一下關注，私信小編。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
