整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開發程序時，會經常用到框架，比如說常見的考試管理系統就涉及了浮動框架。今天給大家展示一個簡單的例子如何運用浮動框架（獨立功能的頁面）重新組成一個完整的頁面（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中浮動框架的應用”先聊到這。圖中是源碼一部分，源碼私信。每天學習一個知識點，每日寄語”你所有的努力，都有跡可循。”如轉載清標明出處，
了美化網站，我在網站上面添加了一個HTML懸浮音樂播放器，先來看看一下效果圖。
如何在自己的網站上添加HTML懸浮音樂播放器呢？今天和你們分享
首先申明三點：
1、本播放器實際上是調用網易云音樂的音樂進行播放，音樂版權歸網易云音樂所有，僅供個人學習研究，用于商用的后果自負！
2、本播放器的演示效果可以在我的博客首頁看到，默認支持所有Html和PHP環境的網站。
3、本播放器可以使用電腦、手機、IPAD等設備訪問，自適應。）
具體的操作方法：
在網站源文件中（如果有單獨的頁腳文件，也可以放在頁腳文件里面）添加這三行代碼：
<!--音樂播放器-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://myhkw.cn/player/js/player.js" id="myhk" key="demo" m="1"></script>
然后保存發布，在瀏覽器刷新網頁就看到效果了
. 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>
對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應用到這個元素。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
