Dreamweaver怎么使用clear清除浮動?
我要評論今天我們就來看看Dreamweaver中清除浮動clear的用法，浮動效果只會對后面的有影響，所以清除浮動命令要添加在后者身上，具體該怎么使用呢？下面我們就來看看詳細的教程。
1、打開Dreamweaver新建html文檔，在body中輸入內容
<div>01</div> <div>02</div> <div>03</div> <div>04</div>
2、對添加的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、對第一個div添加浮動效果float:left；
4、在瀏覽器中預覽查看效果如圖所示，可以看到只對第一個div添加了浮動效果，而下方的第二個div也受到了影響，
5、所以為了避免第二個也受到影響，對其添加清除浮動，因為第一個是添加了向左浮動left，所以如果清除第二個的浮動效果，可以添加清除向左浮動clear:left;
6、如果不清楚該添加向哪個方向的清除屬性，可以設置為clear:both;不管向左還是向右一律清除，如圖所示效果也是相同的。
7、對第三個div添加向右的浮動，如果所示float:right;
8、對第三個div浮動，會影響到第四個div，所以對第四個div添加清除浮動。
以上就是Dreamweaver中clear清除浮動的使用方法，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
相關文章
Dreamweaver網(wǎng)頁怎么創(chuàng)建css樣式的復合聲明?
Dreamweaver網(wǎng)頁怎么創(chuàng)建css樣式的復合聲明？Dreamweaver中想要制作一個css樣式的復合聲明，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-02
Dreamweaver網(wǎng)頁中怎么插入導航條? dw網(wǎng)頁導航條的使用方法
Dreamweaver網(wǎng)頁中怎么插入導航條？Dreamweaver中網(wǎng)頁為了更有層次感，想要插入導航條，該怎么使用導航條呢？下面我們就來看看dw網(wǎng)頁導航條的使用方法，需要的朋友可以參考2018-01-02
Dreamweaver怎么避免中文亂碼的問題？Dreamweaver設計網(wǎng)站的時候，會遇到中文亂碼的情況，該怎么提前預防出現(xiàn)這種情況呢？請看下文詳細的介紹，需要的朋友可以參考下2017-12-31
Dreamweaver cc2018新版頁面怎么切換回舊版本布局?
Dreamweaver cc2018新版頁面怎么切換回舊版本布局？Dreamweaver cc2018中的布局界面和舊版本有很大不同，很多工具都找不到，想要切換到舊版本，該怎么切花呢？請看下文詳細2017-12-20
Dreamweaver怎么添加本地的瀏覽器為測試瀏覽器？Dreamweaver測試瀏覽器可以自己添加，該怎么將電腦安裝的火狐瀏覽器添加到測試瀏覽器呢？下面我們就來看看詳細的教程，需要2017-12-19
dreamweaver網(wǎng)頁中怎么制作DIV圖層?
dreamweaver網(wǎng)頁中怎么制作DIV圖層？dreamweaver制作網(wǎng)頁的時候，想要在網(wǎng)頁上制作一個圖層放圖片，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-12-19
Dreamweaver怎么使用標簽及代碼設計表格？Dreamweaver中可以直接繪制表格，也可以通過標簽和代碼來制作表格，下面我們就來看看詳細的教程，需要的朋友可以參考下2017-12-12
Dreamweaver怎么使用框架結構快速制作網(wǎng)頁?
Dreamweaver怎么使用框架結構快速制作網(wǎng)頁？Dreamweaver制作網(wǎng)頁的時候，表格布局已經(jīng)不能實現(xiàn)網(wǎng)頁的功能了，比如同一頁面下有多個子頁面時，就要使用框架結構來布局，下面2017-12-11
dreamweaver怎么制作鼠標經(jīng)過圖片變換的效果?
dreamweaver怎么制作鼠標經(jīng)過圖片變換的效果？dreamweaver中想要制鼠標經(jīng)過或點擊圖片，圖片會改變，該怎么制作這個效果呢？下面我們就來看看詳細的教程，需要的朋友可以參2017-12-11
dreamweaver怎么快速對齊代碼? dw對齊代碼的設置方法
dreamweaver怎么快速對齊代碼？dreamweaver中的代碼很多，想要對齊代碼，該怎么對齊呢？下面我們就來看看dw對齊代碼的設置方法，需要的朋友可以參考下2017-12-11
