css內層將外層撐開的方法

歡迎大家在這裡學習css內層將外層撐開!這裡是我們給大家整理出來的精彩內容。我相信，這些問題也肯定是很多朋友在關心的，所以我就給大家談談這個!

在CSS排版中，如果一個層中的層使用了float浮動的話，那麼就有可能會出現外層沒有被內層撐開的情況，如以下代碼所示：

 

測試

 

左邊

 

 

如果要解決這個問題，可以在外層的CSS中加上“overflow:auto”。

在CSS中overflow屬於用來說明當內容溢出元素框時要怎麼處理，從上圖中可以看出，內層已經溢出了外層，所以需要使用overflow屬性來指如何顯示內層中。overflow屬性的默認值是visible，也就是不管它是怎麼溢出的，溢出的內容不裁剪，任其顯示在元素框外面。

除了visible值之後，overflow屬性還有以下幾個值：

hidden：內容會被裁剪，溢出的部分看不到。

scroll：使用滾動條來查看溢出的部分，始終顯示滾動條。

auto：如果內容需要裁剪，則等於scroll，顯示滾動條;否則不顯示滾動條。

inherit：從父元素中繼承overflow屬性值。不過以前的IE版本都不支持該屬性值，包括IE8，IE9還沒試過。

由於本例中，外層的CSS沒有指定overflow屬性，所以默認為visible，也就是不管它怎麼個溢出法，所以，只要將外層的CSS中加上overflow:auto，如以下代碼所示：

 

外層

 

內層

 

 

也許有人會說，為什麼設置overflow:auto之後，外層就包含了內層，而不是將溢出的那部分使用滾動條顯示出來呢?這是因為沒有指定外層的高度，所以它就自適應了。如果指定了外層的高度，而內層的高度又大於外層的高度，那麼就會顯示滾動條了。如以下代碼所示。

 

外層

 

內層

 

 

好了，css內層將外層撐開內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

怎麼把CSS代碼高效整潔呢