Dreamweaver怎么使用clear清除浮動(dòng)?
我要評(píng)論今天我們就來(lái)看看Dreamweaver中清除浮動(dòng)clear的用法，浮動(dòng)效果只會(huì)對(duì)后面的有影響，所以清除浮動(dòng)命令要添加在后者身上，具體該怎么使用呢？下面我們就來(lái)看看詳細(xì)的教程。
Adobe Dreamweaver CC 2018 V18.0 中文/英文安裝版 32/64位
- 類(lèi)型：網(wǎng)頁(yè)設(shè)計(jì)
- 大?。?/span>968MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2017-10-19
1、打開(kāi)Dreamweaver新建html文檔，在body中輸入內(nèi)容
<div>01</div> <div>02</div> <div>03</div> <div>04</div>
2、對(duì)添加的div添加屬性值，如圖所示，添加不同的顏色作為背景
div:nth-child(1){background-color:red;}
div:nth-child(2){background-color:green;}
div:nth-child(3){background-color:blue;}
div:nth-child(4){background-color:gray;}
3、對(duì)第一個(gè)div添加浮動(dòng)效果float:left；
4、在瀏覽器中預(yù)覽查看效果如圖所示，可以看到只對(duì)第一個(gè)div添加了浮動(dòng)效果，而下方的第二個(gè)div也受到了影響，
5、所以為了避免第二個(gè)也受到影響，對(duì)其添加清除浮動(dòng)，因?yàn)榈谝粋€(gè)是添加了向左浮動(dòng)left，所以如果清除第二個(gè)的浮動(dòng)效果，可以添加清除向左浮動(dòng)clear:left;
6、如果不清楚該添加向哪個(gè)方向的清除屬性，可以設(shè)置為clear:both;不管向左還是向右一律清除，如圖所示效果也是相同的。
7、對(duì)第三個(gè)div添加向右的浮動(dòng)，如果所示float:right;
8、對(duì)第三個(gè)div浮動(dòng)，會(huì)影響到第四個(gè)div，所以對(duì)第四個(gè)div添加清除浮動(dòng)。
以上就是Dreamweaver中clear清除浮動(dòng)的使用方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
dreamweaver怎么做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)?
相關(guān)文章
Dreamweaver網(wǎng)頁(yè)怎么創(chuàng)建css樣式的復(fù)合聲明?
Dreamweaver網(wǎng)頁(yè)怎么創(chuàng)建css樣式的復(fù)合聲明？Dreamweaver中想要制作一個(gè)css樣式的復(fù)合聲明，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-01-02
Dreamweaver網(wǎng)頁(yè)中怎么插入導(dǎo)航條? dw網(wǎng)頁(yè)導(dǎo)航條的使用方法
Dreamweaver網(wǎng)頁(yè)中怎么插入導(dǎo)航條？Dreamweaver中網(wǎng)頁(yè)為了更有層次感，想要插入導(dǎo)航條，該怎么使用導(dǎo)航條呢？下面我們就來(lái)看看dw網(wǎng)頁(yè)導(dǎo)航條的使用方法，需要的朋友可以參考2018-01-02
Dreamweaver怎么避免中文亂碼的問(wèn)題？Dreamweaver設(shè)計(jì)網(wǎng)站的時(shí)候，會(huì)遇到中文亂碼的情況，該怎么提前預(yù)防出現(xiàn)這種情況呢？請(qǐng)看下文詳細(xì)的介紹，需要的朋友可以參考下2017-12-31
Dreamweaver cc2018新版頁(yè)面怎么切換回舊版本布局?
Dreamweaver cc2018新版頁(yè)面怎么切換回舊版本布局？Dreamweaver cc2018中的布局界面和舊版本有很大不同，很多工具都找不到，想要切換到舊版本，該怎么切花呢？請(qǐng)看下文詳細(xì)2017-12-20
Dreamweaver怎么添加本地的瀏覽器為測(cè)試瀏覽器?
Dreamweaver怎么添加本地的瀏覽器為測(cè)試瀏覽器？Dreamweaver測(cè)試瀏覽器可以自己添加，該怎么將電腦安裝的火狐瀏覽器添加到測(cè)試瀏覽器呢？下面我們就來(lái)看看詳細(xì)的教程，需要2017-12-19
dreamweaver網(wǎng)頁(yè)中怎么制作DIV圖層?
dreamweaver網(wǎng)頁(yè)中怎么制作DIV圖層？dreamweaver制作網(wǎng)頁(yè)的時(shí)候，想要在網(wǎng)頁(yè)上制作一個(gè)圖層放圖片，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-12-19
Dreamweaver怎么使用標(biāo)簽及代碼設(shè)計(jì)表格?
Dreamweaver怎么使用標(biāo)簽及代碼設(shè)計(jì)表格？Dreamweaver中可以直接繪制表格，也可以通過(guò)標(biāo)簽和代碼來(lái)制作表格，下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-12-12
Dreamweaver怎么使用框架結(jié)構(gòu)快速制作網(wǎng)頁(yè)?
Dreamweaver怎么使用框架結(jié)構(gòu)快速制作網(wǎng)頁(yè)？Dreamweaver制作網(wǎng)頁(yè)的時(shí)候，表格布局已經(jīng)不能實(shí)現(xiàn)網(wǎng)頁(yè)的功能了，比如同一頁(yè)面下有多個(gè)子頁(yè)面時(shí)，就要使用框架結(jié)構(gòu)來(lái)布局，下面2017-12-11
dreamweaver怎么制作鼠標(biāo)經(jīng)過(guò)圖片變換的效果?
dreamweaver怎么制作鼠標(biāo)經(jīng)過(guò)圖片變換的效果？dreamweaver中想要制鼠標(biāo)經(jīng)過(guò)或點(diǎn)擊圖片，圖片會(huì)改變，該怎么制作這個(gè)效果呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參2017-12-11
dreamweaver怎么快速對(duì)齊代碼? dw對(duì)齊代碼的設(shè)置方法
dreamweaver怎么快速對(duì)齊代碼？dreamweaver中的代碼很多，想要對(duì)齊代碼，該怎么對(duì)齊呢？下面我們就來(lái)看看dw對(duì)齊代碼的設(shè)置方法，需要的朋友可以參考下2017-12-11
