溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中overflow: hidden的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
溢出隱藏
就是隱藏超出規定高度的文本或者圖像信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {background-color: yellow;width: 350px;height: 100px;overflow: hidden;}
</style>
</head>
<body>
<p>元素中的內容超出了給定的寬度和高度屬性，overflow屬性<br>可以確定顯示的方式，以及是否顯示滾動條。</p>
<div>這個屬性定義溢出元素內容區的內容會如何處理。<br>如果值為 hidden，則隱藏超出范圍的部分。<br>如果值為 scroll，則顯示滾動條。<br>如果值為 visible，則超出部分會呈現在元素框之外。<br>如果值為auto，則為自動；文本超出元素框，則顯示滾動條，沒有超出，則不顯示滾動條。<br>如果值為inherit，則繼承父元素的overflow屬性的值。</div>
</body>
</html>下圖分別是值為hidden和值為auto時截取
還有一個是單行顯示文本信息，超出部分用省略號顯示（強調一下：必須是一行文本顯示才有效哦！）
div {
background-color: yellow;
width: 350px;
margin: 100px auto;
white-space: nowrap;/*強調文本在一行內顯示*/
overflow: hidden;/*溢出內容為隱藏*/
text-overflow: ellipsis;/*溢出文本顯示省略號*/
}
清除浮動
布局的時候經常會用這種左右布局：一個父盒子，父盒子中包含 left 和 right 兩個 child 盒子。但是 child 的內容個數大小都不確定，也就不能給父盒子固定的高度，父盒子高度就需要根據 child 盒子高度來改變。下面我們來了解一下！
下面是父盒子給了200px的高度，兩個 child 盒子左右浮動，顯示是沒有問題的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
.header {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
.father_box {width: 500px;height: 200px;margin: 0 auto;background-color: yellow;}
.child_left {width: 100px;height: 100px;background-color: blue;float: left;}
.child_right {width: 200px;height: 150px;background-color: blue;float: right;}
.footer {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
</style>
</head>
<body>
<div class="header">header在這兒</div>
<div class="father_box">
<div class="child_left">child_left</div>
<div class="child_right">child_right</div>
</div>
<div class="footer">footer在這兒</div>
</body>
</html>
當右面的盒子內容增加，父盒子也就應該隨著增高，這時，我們通常都會刪除父盒子的高度，讓父盒子自適應高度，但是結果卻是這樣。兩個 child 盒子覆蓋了 footer ，這是因為：兩個 child 因為浮動的關系，脫離了標準流，但是父盒子沒有給高度，父盒子就認為它沒有任何內容，所以高度就不會被內容撐開，相當于父級的高度是0px;那么跟他平級的盒子footer,就會按照標準流的排布，緊挨著平級的黃色父盒子排著下來，就造成了頁面的排布紊亂（也叫頁面的塌陷）。
這時我們給父盒子加一個 overflow:hiffen; 這時頁面就變成了這樣，父盒子高度隨著 child 盒子增高也增高了。
如果在IE比較低版本的瀏覽器中使用overflow:hidden;也不能達到這樣的效果，那么就加上 zoom:1; 即：overflow:hidden;zoom:1;
這個原理其實是一個叫做BFC(Block formatting context)的概念在起作用，也就是“塊格式化上下文”。BFC定義了一塊獨立的渲染區域，規定了其內部塊級元素的渲染規則，其渲染效果不受外界環境的干擾。
對BFC感興趣的小伙伴們可以再去深入了解一下啦！
解決插入圖片后圖片底部的留白問題
插入圖片后，由于box盒子沒有給定高度，所以會被圖片的高度撐開，并會留下幾個像素的空隙（紅色部分）。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {margin: 0;padding: 0;list-style: none;}
.box {width: 200px;background-color: red;margin: 0 auto;}
</style>
</head>
<body>
<div class="box">
<img src="img02.jpg" width="200" height="200" alt="">
</div>
</body>
</html>解決辦法有下面兩種：
1、給父盒子加一個高度height，和圖片一樣高，并添加overflow:hidden;（這兩個一起添加，兼容性會更好一些！）
2、不需要給盒子添加高度，讓其自適應圖片高，而給img添加display:block;
以上是“css中overflow: hidden的使用方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
