如何使用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屬性”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。