整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
素顯示模式
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 :不允許有浮動對象
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文檔流
是瀏覽器解析網頁的一個重要概念。對于一個XHTML網頁，body元素下的任意元素，根據其先后順序，組成了一個上下關系，這便是文檔流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置。文檔流是瀏覽器的默認顯示規則。
Float
1）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
2）由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
例1：
例2：
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
例3：
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。
例4：
如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
例5：
浮動元素會生成一個塊級元素，而不論它本身是何種元素。
代碼：
<head>
<style type="text/css">
span{ float:left; width:100px; height:100px; background-color: #FFCCCC}
</style>
</head>
<body>
<span>內聯元素浮動會變成塊</span>
</body>
效果：
解釋：內聯元素無法設置寬高，但是加了float后便可以，說明浮動的元素都是塊。
· 如果未給浮動元素設置寬度，那么其寬度為內容寬度。
代碼：
<head>
<style type="text/css">
div{ float:left;background-color: #FFCCCC}
</style>
</head>
<body>
<div>浮動元素的默認寬度看內容</div>
</body>
效果：
解釋：div是個塊級元素，默認寬度為父級容器的100%，但是加上浮動后，寬度變的符合內容，可見，浮動的元素，如果不設置寬度，那么它會根據內容自適應寬度。
開發程序時，會經常用到框架，比如說常見的考試管理系統就涉及了浮動框架。今天給大家展示一個簡單的例子如何運用浮動框架（獨立功能的頁面）重新組成一個完整的頁面（A頁面），在瀏覽器顯示。要實現如下的效果：
把要實現的頁面分為兩大部分，一部分是左側主要是系統管理選項（B頁面），另一部分是右側的查詢結果顯示（C頁面），最后再用用浮動框架把他們嵌入到最后顯示頁面，便于表達我們就叫它A頁面。A頁面代碼如下：
上圖標紅框的位置是框架嵌入的頁面，它們分別是A頁面左側（B頁面）和A頁面的右側（C頁面）。B頁面和C頁面代碼如下：
B頁面代碼
C頁面部分代碼
技術要點
浮動框架常見屬性
浮動框架iframe是一種特殊的框架頁面，可以在瀏覽器窗口嵌套子窗口，在其中顯示子頁面的內容。語法格式是：
文件時其他框架文件的文件名或者鏈接，name是框架的名字，align是指對齊方式（left、right、center、justify），scrolling是框架的滾動條顯示有三個值（yes、no、auto），frameborder是浮動框架的邊框屬性。
靜態網站使用框架注意事項
1、在seo中應用了大量的框架結構，會導致搜索引擎的“蜘蛛”程序無法抓取頁面，不利于網站seo，所以不建議大規模在靜態網頁上應用框架結構。
2、要處理好框架頁面出現的滾動條，滾動條太多會影響用戶體驗，最后得不償失。
3、框架不適合復雜效果頁面布局（比如說專題頁），靜態網站還是建議使用div+css布局頁面。
關于“關于HTML中浮動框架的應用”先聊到這。圖中是源碼一部分，源碼私信。每天學習一個知識點，每日寄語”你所有的努力，都有跡可循。”如轉載清標明出處，
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
