HTML中的清除浮动的常用方法

以下面的div为例:

HTML:

 

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <div class="test">  
  2.     <div class="test1"></div>  
  3.     <div class="test2"></div>  
  4. </div>  

css:

 

 

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. .test{  
  2.     width: 500px;  
  3.     height: 500px;  
  4.     background: blue;  
  5. }  
  6. .test1{  
  7.     width: 100px;  
  8.     height: 100px;  
  9.     background: red;  
  10. }  
  11. .test2{  
  12.     width: 120px;  
  13.     height: 120px;  
  14.     background: yellow;  
  15. }  

效果如图:

 

现在,给test1设置一个浮动float:left;

由于test1设置了浮动,所以后面的元素被覆盖了效果如图:

清除浮动的方法:给test2设置:clear:both;或者clear:left;

效果如图:

现在给test1和test2都设置float:left;

test1和test2都被浮动起来了。效果为:

如果现在:把父级div,test的高和宽都去掉,父级元素就不会显示,简单说就是没有被子级元素撑起来

效果为:

 

清除浮动的方法:

一、给父级元素设置高度和宽度,也就是说回到了上面

二、给test2元素后面添加一个新元素,然后给这个元素设置clear:both;

效果为:

三、给父级元素设置overflow:hidden;效果给上图一样,但是还有个问题就是在test2后面添加一个新元素,还是会受到前面元素的浮动影响,所以还要给后面的元素清除浮动

这里要注意一个问题:

 

如果在test里面,test2后面添加一个新的div,叫test3,然后给test3设置clear:both;

效果为:

 

如果设置overflow:hidden:

效果为:

 
 本文转载,原出处已失效。
posted @ 2017-03-15 15:51  lin_zone  阅读(586)  评论(0编辑  收藏