開發程序時，會經常用到框架，比如說常見的考試管理系統就涉及了浮動框架。今天給大家展示一個簡單的例子如何運用浮動框架（獨立功能的頁面）重新組成一個完整的頁面（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中浮動框架的應用”先聊到這。圖中是源碼一部分，源碼私信。每天學習一個知識點，每日寄語”你所有的努力，都有跡可循。”如轉載清標明出處，

. Float basics 浮動基礎

在了解浮動之前，要先了解文檔流。文檔流是正式輸出的流。元素在前面的元素先輸出。元素寫在后面的后輸出。塊級元素占滿一行。內聯元素按內容的大小占空間。且不占一行。文檔流有別于浮動流。根據w3school規定，由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。如下：

這個黃色的框在左浮動后，他下面的文字p元素就上來了。（為什么上來，因為p元素忽視浮動框的存在。P是文檔流。黃色框是浮動流。）這樣，他和黃色框是在同一行。文字照顧到框的存在所以向后縮進。其實<p>是也占一行的。但是它忽視黃色框的存在。按正常的文檔流輸出。Float以前主要是用于文字環繞圖片的效果。

注釋： 所有元素屬性中有float或者position：abselute后 這個元素輸出就是浮動流。怎么浮動看第2條。個人這么理解：浮動元素跟著浮動元素走。不考慮文檔流。

1. 什么是浮動？

浮動是指浮動一個元素。當你浮動一個元素后，他就會變成一個塊級元素。而且浮動時元素只能浮動到同一行的左邊或者右邊。

浮動的盒子脫離文檔流，然后飄到最左邊或者最后邊。（具體見下面的解釋！）

2. Where will a floated element move to? 浮動元素怎么浮動！

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

浮動的元素到達 body元素的邊框

或者 其父元素的邊框或者到達另外一個浮動的邊框。

If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

譯文：如果對于浮動元素來講他所在的行沒有足夠的空間給他。他會移到下面的一行。下面的例子：黑盒子做float：left，黃色的做float：right。

3．當你浮動一個元素時，需要設置一個寬度。

4. 下面分析的是：一個元素在浮動元素的上面或者下面。

（重要的知識點：）★★★★★★★

第一：塊級元素在上，飄的元素在下。塊級元素不會受到影響。

第二：如果飄的元素在上，在他下面的元素講會受他的影響，包圍他。對于文字的話他會圍繞飄的元素。但是其他塊級元素，圖片會伸展到其地下去。這個我從dreamweaver中已經也看到了。

看圖：

如果你不想《p》元素上去了和黃色的框在同一行。可以用：清除浮動。

對p實行清除浮動。

處理這樣的問題，可以對塊級使用清除浮動。

規則如下：clear: left 、clear: right; clear:none;

如果你不想在浮動層下面的元素包圍浮動層，你可以用清除浮動。

總結：一般元素浮動后，會空出自己的所有行。左邊也好右邊也好。

然后其他元素就會包圍他。他需要清除自己的左邊或者右邊。就是表示他還是像以前那樣占那么多行。比如圖片占了那么多行。不讓其他元素包圍他。

要理解下面的現象：

上面的圖片是由這個排列出來的。

Div4 因為第一行排不下去了，所以要下來。他這里有一個過程：先排到div3后面，因為排不下去了，后來就又飛到了div1的下面。因為div1高度高，把他給卡住啦。就出現了這樣的情況。

基本概念：

Viewport是windows窗口的文檔可見部分。

Initial containing block：是對于頁面來講的。指頁面的總寬和長。

Containing box：指的是一個box。這個box帶有其他元素，比如p，ul等元素。

Normal flow：文檔的正常輸出，如果沒有float 或者position應用到這個元素。