(overflow:hidden作用) 详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷) overflowhidden 属性值总结全网首发(图文详解1)

overflow: hidden; 是 CSS 中的一个属性值，用于规定当元素的内容超出其规定的边界时发生的情况。在这种情况下，hidden 值会裁剪内容并隐藏超过边框的部分。

以下是 overflow:hidden; 的几种作用及其使用方法的详解：

使用 overflow: hidden; 可以隐藏超出父容器尺寸的子元素部分内容，这在创建设计中的效果时非常有用，比如制作图片轮播或卡片界面。

CSS 示例代码：

.div-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

在浮动布局中，如果子元素浮动，父元素可能不会自动扩展以包含浮动的子元素。使用 overflow: hidden; 可以强制容器元素扩展以包括子元素，这是一个清除浮动的简便方法。

CSS 实现代码：

.clearfix {
  overflow: hidden;
}

外边距塌陷指的是相邻的垂直外边距（上下边距）可能会合并成一个外边距。使用 overflow: hidden; 可以防止外边距塌陷发生。

CSS 示例代码：

.no-collapse {
  overflow: hidden;
}