CSS清除浮动的六种方法
2018-03-16 00:56
781 查看
六种方法中,推荐使用第三种。
缺点:只适合高度固定的布局,如果高度和父级div不一样时,会产生问题
没添加 解决代码 前:
![](https://img-blog.csdn.net/20180315235621125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYjk1NDk2MDYzMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
添加 解决代码 后:
![](https://img-blog.csdn.net/20180315235633480?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYjk1NDk2MDYzMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
缺点:如果页面浮动布局多,就要增加很多空div,让人感觉很不好
执行结果:
![](https://img-blog.csdn.net/20180331230647740?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2I5NTQ5NjA2MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
如果你不懂原理,改成下面这样你就看懂了
执行结果:
![](https://img-blog.csdn.net/20180331230603664?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2I5NTQ5NjA2MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
所以若没有上面的div.box元素且去掉div.clear,直接可以这样实现清除浮动
执行结果:
![](https://img-blog.csdn.net/20180331231026452?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2I5NTQ5NjA2MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
推荐使用。
执行结果:
![](https://img-blog.csdn.net/20180331233315448?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2I5NTQ5NjA2MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
缺点:
(1)overflow:hidden:不能和position一起用,因为超出的尺寸的会被隐藏。
(2)overflow:auto:内部宽高超过父级div时,会出现滚动条。
执行结果:同上
缺点:会产生新的浮动问题。
执行结果:
![](https://img-blog.csdn.net/20180331232717198?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2I5NTQ5NjA2MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
缺点:会产生新的未知问题。
1、父级div定义 height
原理:手动设置父级div的height,解决了父级div无法自动获取高度的问题。缺点:只适合高度固定的布局,如果高度和父级div不一样时,会产生问题
<style type="text/css"> .box{background: red; /*解决代码*/ height: 100px; } .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .footer{background: orange;height: 50px;} </style> <div class="box"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="footer"> </div>
没添加 解决代码 前:
添加 解决代码 后:
2、结尾处加空div标签 clear:both
原理:先添加一个空div,再利用clear:both清除浮动,让父级div能自动获取到高度(添加span等inline标签无效)缺点:如果页面浮动布局多,就要增加很多空div,让人感觉很不好
<style type="text/css"> .box{background: red;} .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .clear{/*解决代码*/clear: both;} .footer{background: orange;height: 50px;} </style> <div class="box"> <div class="left">Left</div> <div class="right">Right</div> <div class="clear"></div> <!-- 无效:<span class="clear"></span> --> </div> <!-- 不能加到这里<div class="clear"></div> --> <div class="footer"> </div>
执行结果:
如果你不懂原理,改成下面这样你就看懂了
<style type="text/css"> .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .clear{/*解决代码*/clear: both;background: red;} .footer{background: orange;height: 50px;} </style> <div class="left">Left</div> <div class="right">Right</div> <div class="clear">I am clear</div> <div class="footer"></div>
执行结果:
所以若没有上面的div.box元素且去掉div.clear,直接可以这样实现清除浮动
<style type="text/css"> .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .footer{/*解决代码*/clear: both;background: orange;height: 50px;} </style> <div class="left">Left</div> <div class="right">Right</div> <div class="footer"></div>
执行结果:
3、父级div定义 伪类:after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
推荐使用。
<style type="text/css"> .box{background: red;} .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .footer{background: orange;height: 50px;} /*解决代码*/ .clear{zoom:1;}/*为解决ie6,ie7浮动问题*/ .clear:after{ /*三者缺一不可*/ display:block; clear:both; content:""; } </style> <div class="box clear"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="footer"></div>
执行结果:
4、父级div定义 overflow:hidden/auto
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden/auto时,浏览器会自动检查浮动区域的高度.缺点:
(1)overflow:hidden:不能和position一起用,因为超出的尺寸的会被隐藏。
(2)overflow:auto:内部宽高超过父级div时,会出现滚动条。
<style type="text/css"> .box{background: red; /*解决代码*/ width:100%; /*或 overflow:auto*/ overflow:hidden; } .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .footer{background: orange;height: 50px;} </style> <div class="box"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="footer"></div>
执行结果:同上
5、大家一起浮动
原理:大家都设为float,所有代码一起浮动,就变成了一个整体缺点:会产生新的浮动问题。
<style type="text/css"> .box{background: red cf18 ; /*解决代码*/ float: left; width: 100%; } .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .footer{ background: orange;height: 50px; /*解决代码*/ float: left; width: 100%; } </style> <div class="box"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="footer">footer</div>
执行结果:
6、父级div定义 display:table
原理:将div属性变成表格缺点:会产生新的未知问题。
<style type="text/css"> .box{background: red; /*解决代码*/ display:table; width:100%; } .left{ background: blue;float: left; height: 100px;width:40%; } .right{ background: pink;float: right; height: 100px;width:50%; } .footer{background: orange;height: 50px;} </style> <div class="box"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="footer"> </div>
相关文章推荐
- css清除浮动各种方法
- css 清除浮动方法
- CSS:清除浮动的最优方法
- css 清除浮动的新方法
- CSS之清除浮动的几种常用方法小结
- CSS清除浮动的方法
- CSS清除浮动方法汇总
- CSS清除浮动常用方法小结
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
- 网页css清除浮动方法
- CSS清除浮动的几种方法(有实例)
- css清除浮动的几种方法
- CSS清除浮动大全共8种方法
- 关于CSS中清除浮动的方法
- CSS清除浮动方法集合
- CSS清除浮动方法集合
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- css清除浮动的五种常用方法
- 关于css清除元素浮动的方法总结(overflow clear floatfix)
- css清除浮动float的三种方法总结。为什么清浮动?浮动会有那些影响?