注册
其实我可以理解乐天,毕竟韩国是它的国家,所以也请理解我们抵制乐天,因为中国也是我们的国家

css清除浮动的几种方法

嗨豆壳技术文章 时间:2014-05-08 15:22:26 [ray]

解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。

根据自己的开发经验总结几种常用的清除浮动方法:

1.结尾处加空div或br标签 clear:both
<style type="text/css"> 
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

2.父级div定义 overflow:hidden或overflow:auto;
<style type="text/css"> 
.div1{ border:1px solid red;width:98%;/*解决代码*/overflow:hidden}
.div2{ border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
<div class="div2">div2</div>

原理:使用overflow:hidden或者overflow:auto时,浏览器会自动检查浮动区域的高度

3.父级div 也一起浮动

原理:所有代码一起浮动,就变成了一个整体

不推荐使用,只作了解。

4.父级div定义 display:table
<style type="text/css"> 
.div1{ border:1px solid red;width:98%;margin-bottom:10px;/*解决代码*/display:table;}
.div2{ border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
<div class="div2">div2</div>

原理:将div属性变成表格

不推荐使用,只作了解。

标签

本文地址:https://www.hi-docs.com/article/9.html

上一篇:echo(),print(),print_r()有什么区别?

下一篇:百度免费IP地址查询API,查询接口