如何使用CSS的overflow属性

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

　　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属性”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。