overflow:hidden的作用


 

 

主要有三個作用,以div為例:

1.當div設置了寬高,div里的內容如果超出了寬高就會被隱藏

例子如下:

未設置overflow的情況

 

設置overflow:hidden后

 

可以看到超出div的部分被隱藏

2.清除浮動

當div不設置高度的時候,內部的元素又設置了float的時候,這個時候內部的元素會脫離div的那一層,這個時候div因為元素脫離,高度就會變成0

這個時候div后面的元素就會頂上來

例子:

目前father未設置高度,里面的子元素未設置浮動的效果

 

這個時候我們給father里的son設置浮動,可以看到下面的mon元素頂上來了,這個是因為father的子元素設置float后,脫離了father的那一層,導致高度為0,所以下面的mon就上來了

設置一下overflow

可以看見son被拉回father那一層,所以father的高度自適應

3.當div里面的元素設置了margin-top的時候,div會跟着一起下來,效果相當給div設置了margin-top,

這個時候給div加上overflow:hidden,就可以清除這個影響

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM