如何使用CSS的overflow属性

这篇“如何使用CSS的overflow属性”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用CSS的overflow属性”文章吧。

创新互联-专业网站定制、快速模板网站建设、高性价比南江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式南江网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖南江地区。费用合理售后完善，十年实体公司更值得信赖。

1、清除浮动，并为其定义CSS代码clear:both

代码实例：

.demo{

width: 500px;

margin: 50px auto;

background-color: #CCCCCC;

}

.left{

width: 100px;

height: 100px;

float: left;

background-color: #21B4BB;

}

.right{

width: 100px;

height: 50px;

float: right;

background-color: #21B4BB;

}

.clear{

clear:both;

}

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2.使用CSS的overflow属性

使用overflow清除浮动：只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。

代码实例：

.demo{

width: 500px;

margin: 50px auto;

background-color: #CCCCCC;

overflow:hidden

}

.left{

width: 100px;

height: 100px;

float: left;

background-color: #21B4BB;

}

.right{

width: 100px;

height: 50px;

float: right;

background-color: #21B4BB;

}

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3.使用CSS的:after伪元素

对父元素使用:after伪元素，设置display:table

display:table 使生成的元素以块级表格显示，占满剩余空间。

通过content: " "生成内容作为最后一个元素，至于content里面是什么都是可以的，CSS经典的是 content:"."，有些版本可能content里面内容为空。

代码实例：

.demo{

width: 500px;

margin: 50px auto;

background-color: #CCCCCC;

*zoom: 1;

}

.demo:after {

content: " ";

display: table;

clear: both;

}

.left{

width: 100px;

height: 100px;

float: left;

background-color: #21B4BB;

}

.right{

width: 100px;

height: 50px;

float: right;

background-color: #21B4BB;

}

缺点：适合现代浏览器，不支持IE6/7，*zoom: 1就是为了兼容IE6/7

以上就是关于“如何使用CSS的overflow属性”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

网站标题：如何使用CSS的overflow属性
文章网址：http://shouzuofang.com/article/gsgeij.html