网页设计浮动和清除浮动
方法/步骤
1、打开WebStorm开发工具,新建‘test.html’文件写代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.v1{height:100px;width:50%;background-color:red;}.v2{height:100px;width:30%;background-color:lawngreen;}</style></head><body><divclass="v1"></div><divclass="v2"></div></body></html>
2、查看效果如下图,这是没有浮动的情况,每个div都是一个块级标签,上下排列独占一行
3、使用浮动方式,修改代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.v1{height:100px;width:50%;background-color:red;float:left;}.v2{height:100px;width:30%;background-color:lawngreen;float:left;}</style></head><body><divclass="v1"></div><divclass="v2"></div></body></html>
4、查看效果如下图,变成了并排的一行,说明一下因为两个宽度加起来不足100%,当超过100%还是会变成两行。
5、清除浮动,一般用于嵌套div的父div中,目的为了当父div未设置高度,使用兮掉嵯史伪元素填充使子div高度撑起父div,如不弋讥孜求使用清除浮动,代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.v1{height:100px;width:50%;background-color:red;float:left;}.v2{height:100px;width:30%;background-color:lawngreen;float:left;}#fdiv{border:10pxsolidblack}</style></head><body><divid="fdiv"><divclass="v1">c1</div><divclass="v2">c2</div></div></body></html>
6、查看效果如下图,父div的高度为空,因为浮动的便签脱离了文档流
7、解决上述问题,使用伪元素填充,代码如下:争犸禀淫<!DOCTYPEhtml><htmllang="en"><head>&造婷用痃lt;metacharset="UTF-8"><title>Title</title><style>.v1{height:100px;width:50%;background-color:red;float:left;}.v2{height:100px;width:30%;background-color:lawngreen;float:left;}#fdiv{border:10pxsolidblack}#fdiv:after{content:"";clear:left;display:block;}</style></head><body><divid="fdiv"><divclass="v1">c1</div><divclass="v2">c2</div></div></body></html>
8、再次查看效果就正常了