整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
素顯示模式
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 :不允許有浮動對象
CSS世界中的float屬性是一個年代非常久遠的屬性。雖然最初創造浮動并不是為了用于頁面布局，但它在布局方面表現得很出色。然而為了理解浮動，我們首先必須牢記它的設計初衷。Web誕生之初，帶寬就那么一點點，我們能夠做到的也只是展示文字以及零星圖片而已，怎么可能浮動設計的目的就是為了實現各種磚頭式的復雜布局呢？那個年代復雜布局都是用<table>實現的。既然這樣，那float屬性設計的目的究竟是什么呢？
很簡單，一句話：浮動的本質就是為了實現文字環繞效果。而這種文字環繞，主要指的就是文字環繞圖片顯示的效果。所以，大家應該也多少對為什么老IE瀏覽器與浮動相關的bug一火車都裝不下有些了解了吧！人家的功能本來就很單純，只是讓文字可以繞著圖片跑，你偏要各種布局，結果撐不住了吧！
所以說：浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界本身的“流動性”和“自適應性”，以構建能夠適用于各種環境的高質量的網頁布局。好的網頁應該如同好的建筑。傳統的樓房是典型的“剛”式結構，磚頭加樓板，問題不言而喻，一個小小的地震可能就被夷為平地；而好的樓房應該是有“柔”在其中，也就是高質量的鋼筋結構，當地震導致房屋搖晃的時候，可以通過鋼筋的“柔性”卸力而保障整體結構的穩固。臺風襲來，很少見到說柔弱的柳樹被吹倒，反而會經常看到堅固的電線桿被風吹倒的消息，道理其實也類似。
浮動有三個關鍵字可以選擇，left為向左浮動，right為向右浮動，none為不浮動。無論是行內元素（inline）還是塊級元素（block），設置浮動后都會變成塊級元素。但表現得卻更像行內塊元素（inline-block），因為在沒有明確寬度的時候，寬度會隨著內容自適應，而不是占據一行。
過去，浮動的行為經常受到瀏覽器bug的干擾，特別是在IE6和IE7中。幸虧這些瀏覽器幾乎已經淡出市場了，我們不必再擔心那些bug了。現在我們可以保證各種瀏覽器對浮動的處理是一致的。但是浮動仍有一些行為會讓你措手不及。這些并不是bug，而是因為浮動嚴格遵循了標準。讓我們來看看浮動如何工作，以及怎樣調整浮動的行為來實現理想的布局。
float都有哪些有意思的特性呢？具體如下：
所謂“包裹性”，由“包裹”和“自適應性”兩部分組成。包裹假設浮動元素父元素寬度180px，浮動元素子元素是一個120px寬度的圖片，則此時浮動元素寬度表現為“包裹”，就是里面圖片的寬度120px，代碼如下：
.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div">
<div class="float">
<img src="float.jpg">
</div>
</div>自適應性，如果浮動元素的子元素不只是一張120px寬度的圖片，還有一大波普通的文字，例如：
<div class="father">
<div class="float">
<img src="float.jpg">大家好，我是碼農洞見。
</div>
</div>則此時浮動元素寬度就自適應父元素的180px寬度，最終的寬度表現也是180px。
塊狀化的意思是，元素一旦float的屬性值不為none，則其display計算值就是block或者table。
float通過破壞正常CSS流實現CSS環繞，帶來了煩人的“高度塌陷”的問題，然而，凡事都具有兩面性，只要了解透徹，說不定就可以變廢為寶、化腐朽為神奇。例如。我們可以利用float破壞CSS正常流的特性，實現兩欄或多欄的自適應布局。
浮動會影響周圍元素，并且還會引發很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。clear屬性語法如下：
clear: none | left | right | both在實際開發中，我們幾乎不會使用“clear:left”或“clear:right”來單獨清除左浮動或右浮動，往往都是直截了當地使用“clear:both”來把所有浮動清除，既簡單又省事。也就是說，我們只需要記住“clear:both”就可以了。
通過閱讀本文我們了解到浮動的設計初衷是讓文字圍繞一個元素排列，但有時這種效果并不是我們想要的。使用清除浮動來包含浮動元素。所謂生生相克，既然有破壞，就有保護其他元素不被破壞的屬性。總之，只有深入理解浮動的工作原理，勤加練習才有可能避開常見的陷阱。達到選擇合適的工具來實現想要的效果。
為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！
東IT優就業
廣州IT培訓老師給大家講講，清除浮動的幾種常用方法。
首先，浮動這個樣式的出現，僅僅只是為了實現圖文環繞的效果，現在大多時利用浮動來布局;
浮動：
使元素推理文檔流，按照指定方向發生移動;
遇到父級邊界或者相鄰的浮動元素會停下來;
浮動的特性：
1）塊元素一行顯示多個;
2）內聯元素支持寬高;
3）沒有設置寬度時由內容撐開寬度;
4）脫離文檔流。
浮動的破壞性：
浮動元素脫離文檔流后，導致父級元素高度塌陷。父級元素無法包裹住子級浮動元素。
為什么要清除浮動？主要是解決父級高度塌陷。
清除浮動的方法：
1）clear清除浮動
clear:left || right || both || none
clear:left 清除左側浮動元素;
clear:right 清除右側浮動元素
clear:both 清除左右兩邊
clear:none 不清除
代碼：
效果圖：
缺點：如果浮動元素過多浪費標簽，不優雅。
2）inline-block請浮動
效果圖：
缺點：margin：auto;失效。
3）<br/>的clear屬性請浮動
代碼：
效果圖：
缺點： 當前頁面有很多模塊用到浮動時，每個用到的模塊都要加
不符合w3c標準。
4.以浮制浮
給父級添加浮動
代碼：
效果圖：
缺點：不理智的行為，總會有個父級節點會塌陷;
5.：afte偽類請浮動
代碼：
效果圖：
缺點：無，目前最優雅的清除浮動的方式。
希望廣州IT培訓老師上述分享的內容對大家有所幫助，有其他IT常見問題歡迎提出交流。
廣東IT優就業
出處：www.cnblogs.com/LNning/p/7897331.html
更多IT精彩推薦：
月入過萬的WEB工程師是如何煉成的?http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
