第十五課 div css當中DIV浮動原理和應用詳解答

asp老師 · 發(fā)表于 2014-12-3 23:09:26

親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請您及時注冊登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號？立即注冊

x

本帖最后由 asp老師于 2014-12-4 14:23 編輯

那么上節(jié)課我們講了在div 和css當中的 margin外邊距和padding內(nèi)邊距的設置方法以及關(guān)于如何去設置她們的數(shù)值的方法，如果您還對div css當中的知識不太清楚的話，您可以參考這個文件：
第十四課 div css當中 DIV內(nèi)邊距和外邊距概念講解
好，那么我們開始今天的課程了，首先呢，我們新建一個15.html的文件以及15.css的文件，并且我們把這個15.css文件引入我們的15.html當中15.html當中的源代碼如下：

<body>
<div class="aaa">111</div>
<div class="bbb">222</div>
</body>

復制代碼

15.css文件代碼如下；

.aaa{width:300px; height:150px; background:#F00;}
.bbb{width:300px; height:150px; background:#0F0;}

復制代碼

那么此時的效果如下：

此時呢，我們可以介紹下文本流的概念：我們寫一排很多的文字，當我們文字占據(jù)了網(wǎng)頁的一行的時候，會自動的往下面令一行開始寫起，那么這樣的文字如流水一般，我們統(tǒng)稱為文本流。
如果我們修改css代碼如下：

.aaa{width:50px; height:50px; background:#F00;}
.bbb{width:300px; height:150px; background:#0F0;}

復制代碼

效果如下;

好，此時如果我們繼續(xù)把.aaa后面的css代碼加一個屬性為float:left; 那么此時的css代碼如下：

.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0;}

復制代碼

效果如下：

大家此時可以看到，這個.aaa的div已經(jīng)好像是浮動到.bbb的div的上方了，那么我們這個就是float:left; 的效果
好，我們?nèi)绻^續(xù)把.bbb的屬性也添加一個float:left; 的屬性，我們來看下會有什么樣的效果出現(xiàn)呢！

.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0; float:left;}

復制代碼

那么此時的效果如下：

大家此時可以看到，我們出現(xiàn)了第二個的.bbb的div現(xiàn)在也是左浮動但是呢，卻是和第一個.aaa的div考到一起了，這個大家可以理解為，默認的沒有float的為一個層，比如是人間平民，如果加了float那么就到了云霄殿，而這2個都加了float，表示這2個都到了云霄殿，但是呢，到了云霄殿就要遵守云霄殿的規(guī)則，也是先來后到，要排隊。則會出現(xiàn)這樣的效果；
如果我們在15.html當中在加一個div呢，我們來看源代碼

<body>
<div class="aaa">111</div>
<div class="bbb">222</div>
<div class="ccc">333</div>
</body>

復制代碼

同時呢，我們在到15.css當中定義我們的屬性；代碼如下：

.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0; float:left;}
.ccc{width:300px; height:150px; background:#FF0; float:left;}

復制代碼

那么此時的效果是什么呢？
我們分析下這個代碼：
我們加了一個.ccc的div同時呢，我們又讓這個.ccc的div也到了云霄殿加了一個float:left; 的屬性效果；好我們來看這個效果如下：

如果我們把第二個不加float呢，代碼如下

.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0; }
.ccc{width:300px; height:150px; background:#FF0; float:left;}

復制代碼

效果如下

那么此時我們看到，第一個加了float，那么它脫離了文本留，但是呢，第二個沒有脫離，好那么第二個頂替了第一個的文本流的位置，而第三個也float了，它又挨著第二個，如果此時我們加了另一個div，源代碼如下：

<body>
<div class="aaa">111</div>
<div class="bbb">222</div>
<div class="ccc">333</div>
<div class="ddd">444</div>
</body>

復制代碼

此時我們在定義.ddd的屬性，css代碼如下

<blockquote>.aaa{width:50px; height:50px; background:#F00; float:left;}

復制代碼

那么此時我們來分析下這段代碼
第一個.aaa的div 浮動了，第二個沒有浮動，那么第二個頂了一個位置；第三個和第四個都浮動了，但是因為第二個沒有浮動所以第三個和第四個只能是僅僅挨著的。那么效果如下；

---------------------------------------------------修改代碼如下--------------

.aaa{width:50px; height:50px; background:#F00; float:left;}
.bbb{width:300px; height:150px; background:#0F0;float:left; }
.ccc{width:300px; height:150px; background:#FF0; float:right; }
.ddd{width:300px; height:150px; background:#00F; float:right;}

復制代碼

道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術(shù)支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服！如果您不是我們的客戶也沒問題，點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后，我們?yōu)槟赓M進行無縫搬家服務，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務！