时间:2021-05-08
今天我们就来看看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清除浮动的使用方法,希望大家喜欢,请继续关注。
相关推荐:
DW怎么设置网站的背景图像?
dreamweaver怎么做一个简单的网页?
dreamweaver中怎么将文字放到图片上?
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用clear属性清除浮动是司空见惯的事情,对于clear属性的定义可能也烂熟于胸了。例如,clear:left是清除左侧的浮动元素,实例代码如下:复制代码代码
清除浮动方法方法一:使用带clear属性的空元素在浮动元素后使用一个空元素如,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或
CSS使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空Div:.clear{clear:both;}更为优良的CSS代码是:.clear:a
一、理解clear:left/clear:right当想到clear:left的时候,自然会认为是“清除左浮动”,clear:right
如何清除浮动?方法1:#test{clear:both;}#test为浮动元素的下一个兄弟元素方法2:#test{display:block;zoom:1;ov