overflow:hidden的使用

最新推荐文章于 2024-07-20 16:23:06 发布

原创最新推荐文章于 2024-07-20 16:23:06 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS中`overflow:hidden`的三个主要用途：1) 溢出隐藏，用于处理内容超过元素宽高的情况；2) 清除浮动，解决因子元素浮动导致的父元素高度为0的问题；3) 解决外边距塌陷，避免父元素因子元素的margin-top而下移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、溢出隐藏

如果某一元素内容超过所给定的宽高，就会溢出。

<style type="text/css">
    .box{
        background-color: lightblue;
        width: 400px;
        height: 60px;
        margin: 0 auto;
        text-align: center;
    }
</style>

<body>
<div class="box">
	今天天气好晴朗！处处好风光！<br>
	今天天气好晴朗！处处好风光！<br>
	今天天气好晴朗！处处好风光！<br>
	今天天气好晴朗！处处好风光！<br>
</div>
</body>

使用overflow:hidden

二、清除浮动

当父元素没有设置高度时，当父级元素内部的子元素全部都设置浮动float后，子元素会脱离标准流，不占位，所以父级元素高度为0。

<style type="text/css">
    .father{
		background-color: black;
	}
	.box{
		width: 50px;
		height: 50px;
            float: left;
	}
	.a{background-color: red;}
	.b{background-color: pink;}
	.c{background-color: blue;}
</style>

<body>
<div class="father">
	<div class="box a">1</div>
	<div class="box b">2</div>
	<div class="box c">3</div>
</div>

样式：（看不到父元素的背景色）

给父元素设置 overflow:hidden，这样父级的高度就随子级容器及子级内容的高度而自适应

三、解决外边距塌陷

当父元素内有子元素，想给子元素增加margin-top。但是此时并不是子元素和父元素之间有边距，而是父元素会随着子元素往下掉，是父元素和浏览器增加了外边距。

.father{
    background-color: black;
}
.box{
    width: 50px;
    height: 50px;
    background-color: red;
    margin-top: 10px;
}

给父元素设置overflow:hidden，