Dreamweaver怎么使用clear清除浮动?
百度经验 发布时间：2018-06-05 15:18:59 作者：患者无薪 
我要评论
我要评论Dreamweaver怎么使用clear清除浮动？Dreamweaver中想要清除清除浮动命令，该怎么使用呢？下面我们就来详细介绍clear清除浮动的使用方法，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
今天我们就来看看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清除浮动的使用方法，希望大家喜欢，请继续关注程序员之家。
相关推荐：
相关文章
Dreamweaver网页怎么创建css样式的复合声明？Dreamweaver中想要制作一个css样式的复合声明，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-01-02
Dreamweaver网页中怎么插入导航条? dw网页导航条的使用方法
Dreamweaver网页中怎么插入导航条？Dreamweaver中网页为了更有层次感，想要插入导航条，该怎么使用导航条呢？下面我们就来看看dw网页导航条的使用方法，需要的朋友可以参考2018-01-02
Dreamweaver怎么避免中文乱码的问题？Dreamweaver设计网站的时候，会遇到中文乱码的情况，该怎么提前预防出现这种情况呢？请看下文详细的介绍，需要的朋友可以参考下2017-12-31
Dreamweaver cc2018新版页面怎么切换回旧版本布局?
Dreamweaver cc2018新版页面怎么切换回旧版本布局？Dreamweaver cc2018中的布局界面和旧版本有很大不同，很多工具都找不到，想要切换到旧版本，该怎么切花呢？请看下文详细2017-12-20
Dreamweaver怎么添加本地的浏览器为测试浏览器？Dreamweaver测试浏览器可以自己添加，该怎么将电脑安装的火狐浏览器添加到测试浏览器呢？下面我们就来看看详细的教程，需要2017-12-19
dreamweaver网页中怎么制作DIV图层？dreamweaver制作网页的时候，想要在网页上制作一个图层放图片，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-12-19
Dreamweaver怎么使用标签及代码设计表格？Dreamweaver中可以直接绘制表格，也可以通过标签和代码来制作表格，下面我们就来看看详细的教程，需要的朋友可以参考下2017-12-12
Dreamweaver怎么使用框架结构快速制作网页？Dreamweaver制作网页的时候，表格布局已经不能实现网页的功能了，比如同一页面下有多个子页面时，就要使用框架结构来布局，下面2017-12-11
dreamweaver怎么制作鼠标经过图片变换的效果？dreamweaver中想要制鼠标经过或点击图片，图片会改变，该怎么制作这个效果呢？下面我们就来看看详细的教程，需要的朋友可以参2017-12-11
dreamweaver怎么快速对齐代码? dw对齐代码的设置方法
dreamweaver怎么快速对齐代码？dreamweaver中的代码很多，想要对齐代码，该怎么对齐呢？下面我们就来看看dw对齐代码的设置方法，需要的朋友可以参考下2017-12-11
最新评论