清除浮动的方法

Posted 2020-10-03 QinXiao.Shou

 

1.给父级div设置heigh

 　　原理： 父级手动定义height，解决了父级div无法自动获取到高度的问题

　　 优点：简单，代码少

　　 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

　　 不建议使用只是建议高度固定的布局时使用

2.在结尾处加空div标签clear:both

 　　原理：添加一个空div，利用clear：both清除浮动，让父级div能自动湖区高度

　　 优点：简单代码少，浏览器支持好

　　 缺点：很多初学者不理解原理，如果页面浮动多就要增加很多空div，让结构复杂

　　 不推荐使用，这是以前主流的清除浮动的方法

3.父级div定义伪类：after 和zoom

　　原理：IE8以上和非IE浏览器才支持：after，原理和方法2类似，zoom（IE专有属性），可解决ie6，ie7的浮动问题

       优点：浏览器支持好，不容易出怪问题

　　缺点：代码多， 很多人不理解原理，要两句代码结合使用，才能让主流浏览器支持

　   建议使用，建议定义公共类，增加可重复利用性

4.父级div定义overflow:hidden

     原理：必须定义width或者zoom：1，同时不能定义height，使用它的时候，浏览器会自动检查浮动区域高度

     优点：简单，代码少，浏览器支持好

     缺点：不能和position配和使用，因为超出的尺寸会被隐藏

　 只推荐没有使用position或duioverflow：hidden理解比较深的时候使用

5.父级div定义overflow：auto

   原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 
   优点：简单，代码少，浏览器支持好 
　缺点：内部宽高超过父级div时，会出现滚动条。 
   不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

 

6.父级div也一起浮动

　 原理：所有代码一起浮动，就变成了一个整体 
     优点：没有优点 
     缺点：会产生新的浮动问题。 
     建议：不推荐使用，只作了解。

7.结尾处加br标签clear：both

    原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both

8.替代浮动方法要浮动的元素设置display:inline-block

　　优点：整体代码简洁了很多，这是他的价值所在 
　　缺点：有浏览器兼容问题；只有特定的场合适用，像水平菜单条之类，布局之类，并不适合文字环绕         图片这些真正需要float的场合；元素间的纯空白会造成占位