<form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

        <address id="ddzdh"><nobr id="ddzdh"></nobr></address>

              歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
              您的位置:DIVCSS5首頁 > DIV+CSS基礎 >

              div+cssfloat認識及css float用法,DIV CSS float浮動知識用法與float浮動教程篇

              Css樣式的float浮動屬性,用于設置標簽對象(如:<div>標簽盒子、<span>標簽、<a>標簽、<em>標簽html標簽)的浮動布局,浮動也就是我們所說標簽對象浮動居左靠左(float:left)和浮動居右靠右(float:right)。

              float是什么意思?
              float是浮動,翻譯成中文也是浮動意思。進入對應css手冊中float手冊了解float基本信息。

              float的作用
              通過css定義float(浮動)讓div樣式層塊,向左或向右(靠)浮動。

              float浮動教程目錄
              1. float語法
              2. float應用與用法
              3. float浮動案例
              4. css浮動其他應用
              5. css浮動總結

              一、float語法   -   TOP

              Float常跟屬性值left、right、none
              Float:none 不使用浮動
              Float:left 靠左浮動
              Float:right 靠右浮動

              float語法:
              float : none | left |right

              參數值:
              none :  對象不浮動
              left :  對象浮在左邊
              right :  對象浮在右邊

              float浮動結構分析圖
              Float浮動結構分析圖

              接下來我們來通過一個div+css實例講解float使用技巧。

              二、float應用與用法   -   TOP

              Float浮動用于設置對象靠左與靠右浮動樣式,可以實現我們所需要的讓DIV、SPAN等標簽居左居右浮動。

              簡單使用語法

              1. div{float:left} /* css注釋:設置div對象浮動靠左(left) */ 
              2. div{float:right} /* css注釋:設置div對象浮動靠右(right) */ 

              三、css float浮動案例   -   TOP

              我們設置一個盒子里,一個靠右、一個靠左浮動2個盒子,為了直觀看到css浮動布局效果,我們對兩個盒子設置一定寬度、高度和邊框。

              1、主要的html代碼片段:

              1. <div class="divcss5"> 
              2.     <div class="divcss5_left">布局靠左浮動</div> 
              3.     <div class="divcss5_right">布局靠右浮動</div> 
              4.     <div class="clear"></div><!-- html注釋:清除float產生浮動 --> 
              5. </div> 

              2、css代碼片段:

              1. .divcss5{ width:400px;padding:10px;border:1px solid #F00} 
              2. .divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
              3. .divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
              4. .clear{ clear:both} 

              3、效果截圖

              float css浮動用法應用案例截圖
              css div浮動float用法應用案例截圖

              四、css+div浮動其它應用案例(休息閱讀)   -   TOP

              DIV CSS實驗一
              Css樣式實例內容,我們讓文字和圖片在一個固定寬度div層內,讓藍色背景文字內容居右,小圖片居左。
              www.yfzzdoors.com CSS案例演示最終效果圖如下
              float實例示意圖

              1、首先我們設置一個最外層的寬度為300px,高度為200px的css命名為box的css選擇器代碼如下(知識點px是什么意思)
              .box{width:300px; height:200px;}

              2、設置box內的文字內容部分css樣式命名為yangshi,并設置背景為藍色,寬度為120px,居右浮動
              .yangshi{ width:120px; float:right; background:#0066FF;}

              3、設置圖片居左浮動div+css樣式
              img { float: left;}

              4、body內的div布局,代碼如下

               <div class="box">
              <div class="yangshi">我是www.yfzzdoors.com 網站,測試內容</div>
              <img src="demo.gif" />
              </div>

              說明:這里img標簽是鏈接外部圖片,圖片名為demo.gif

              最終演示結果截圖
              css float實例

              CSS實驗二
              接下來我們演示使用div+css讓這里小圖片居右(上個例子是居左),藍色背景文字內容區居左(上個例子是居右)(擴展css 居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片css樣式img { float: left;}為img { float: right;}
              CSS代碼如下:

               .box{width:300px; height:200px;}
              .yangshi{ width:120px; float:right; background:#0066FF;}
              img{ float:left;}

              html中的css代碼和內容不變
              最終演示結果截圖如下:
               

              div+css中fllat實例展示圖

              希望通過以上兩個css實例對你認識float有幫助。希望大家多少實際操作實踐試試!擴展閱讀:CSS清除浮動

              五、css浮動總結   -   TOP

              我們要區別與文字內容靠左( text-align:left)靠右( text-align:right)樣式,浮動只針對html標簽設置靠左靠右浮動樣式。float浮動樣式沒有靠中(浮動居中)的樣式,如果需要讓標簽對象居中我們在css布局居中相關文字給大家詳細講解介紹(css margin)。這里記住浮動靠右使用float:right,浮動靠左使用float:left樣式即可。

              如需轉載,請注明文章出處和來源網址:http://www.yfzzdoors.com/rumen/r93.shtml

              如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
              CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
              本文www.yfzzdoors.com DIVCSS5版權所有。

              人妻AV乱片AV,A∨天堂网在线观看免费,希崎杰西卡亚洲精品中文字幕

                  <form id="ddzdh"><form id="ddzdh"><nobr id="ddzdh"></nobr></form></form>

                    <address id="ddzdh"><nobr id="ddzdh"></nobr></address>