关于清除浮动的一些认识

　　　　　　　　　　  清除浮动方法

方法1：给父级盒子加高

  给他的父级盒子一个高度，只有有高度的盒子才能关住浮动，也就是说只要这个浮动的盒子在一个有高度的父级盒子中，那么他的浮动就不会影响后面的浮动元素。

方法2：clear：both；

  在网页制作中，我们经常用内容来撑起父级盒子的高度，这个时候我们可以给这个浮动的盒子后面的盒子css属性添加clear：both：属性，clear：清除的意思，both： 左右浮动都清除，意思就是清除别人对我的影响。但是存在一个致命的问题就是margin失效。

方法3：

1）隔墙法

  在两个盒子中间加一个有css属性为clear：both；的盒子，来分割开两部分浮动，是两部分互不影响。

2）内墙法

  在第一个盒子里面的最后加一个设置css属性为clear：both；和height属性的盒子，相比外墙法，内墙法是盒子有高了，可以设置背景颜色了。

方法4：overflow：hidden；

overflow：hidden；原意为清除溢出，也可以用来清除浮动，可以被子元素撑出高度，margin也有效，属于小技巧。

方法5：创建一个清除浮动的类

1）

 

1 .clearfix:before,.clearfix:after{
2     content:"";
3     display:table;
4 }
5 .clearfix:after{clear:both;}
6 .clearfix{
7     *zoom:1;/*用来兼容IE/7/6*/
8 }

 

2）

 1 #parentSelector:after{
 2 
 3         content:".";
 4 
 5         height:0;
 6 
 7         visibility:hidden;
 8 
 9         display:block;
10 
11         clear:both;
12 
13         }

以上清除浮动的方法均来自工作和学习中，方法很多，要在工作中灵活运用，之后会为大家带来定位相关小技巧，敬请期待，希望能对需要的人提供帮助，也希望大家能够对我的不足之处进行批评指正。

----学无止境。

　　

 

posted @ 2015-12-11 23:32  叫我MrGuang  阅读(287)  评论(0)  编辑  收藏  举报