浅析CSS中的overflow属性

u010142437

已于 2022-01-21 19:03:35 修改

阅读量2w

点赞数 9

分类专栏： web 文章标签： css overflow

于 2019-01-04 12:37:09 首次发布

本文链接：https://blog.csdn.net/u010142437/article/details/85762717

版权

web 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

overflow属性的作用是规定当内容溢出元素框时发生的事情，定义溢出元素内容区的内容会如何处理。

overflow有下面几种属性值，分别如下：

1.visible：默认值。内容不会被修剪，会呈现在元素框之外。

2.hidden：与visible相反，内容会被修剪，并且其余内容是不可见的。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……

3.scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

不论是否需要，用户代理都会提供一种滚动机制。因此即使元素框中可以放下所有内容也会出现滚动条，而且使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

4.auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。解决了scroll在不需要滚动条也会产生滚动条的问题。

5.inherit：规定应该从父元素继承 overflow 属性的值。

其中，overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。

示例：

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

overflow还有个作用是清除浮动的影响，具体说就是清除包含块内子元素的浮动，我们先来看一个实例：

//html
<body>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>

// css
.parent{
  width:300px; 
  background:#ddd; 
  border:1px solid;
} 
.child1{ 
  width:100px; 
  height:100px; 
  background:pink;
  float:left;
}
.child2{ 
  width:200px; 
  height:50px; 
  background:red;
}

结果：

上面的例子中，我们没有设置.parent的高度，所以.parent的高度默认为auto。由于.child1设置了浮动，脱离了文档流，所以.parent中只有.child2这一个文档流元素。现在我们给.parent添加"overflow:hidden"：

.parent{
  overflow: hidden; 
}

结果：

我们看到，给父元素添加一句"overflow:hidden"，就能让父元素包住这个脱离了文档流的浮动元素，换句话说，"overflow:hidden"可以清除包含块内子元素的浮动的影响。

现在我们看到了现象，可是原因是什么呢？

在解释这个问题之前，我们先了解一下BFC的概念。

BFC

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

1、BFC布局规则

内部的块级元素会在垂直方向，一个接一个地放置；
块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
计算BFC的高度时，浮动元素也参与计算。

2、创建一个BFC

首先我们要知道怎样创建BFC。一个BFC可以被显式触发，只需满足以下条件之一：

float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex。

3、BFC的应用

1）、消除margin合并

在margin合并这篇博客中，我描述了相邻兄弟元素、父元素与第一个和最后一个子元素、空块元素的margin合并情况。那么对于发生margin合并的元素，我们怎样消除margin合并？

对于父子元素，我们可以通过设置padding、border、inline content、height、min-height、max-height等属性来消除；但是相邻的兄弟元素之间必出现margin合并，这时如果想要消除margin合并，又该怎么办？

我们首先要搞清楚为什么会发生margin合并。这些元素（包括兄弟、父子元素等）之间之所以会发生margin合并，是因为它们属于同一个BFC。所以，我们就知道怎么办了，只要让它们不属于同一个BFC不就可以了？

我们来看在margin合并这篇博客中举过的一个例子：

// html
<body>
  <div class='bro1'></div>
  <div class='bro2'> </div>
</body>

// css
body{
  margin:0;
  padding:0;
}
.bro1{
  width:300px;
  height:200px;
  background:#ddd;
  margin-bottom:30px;
}
.bro2{
  width:200px;
  height:100px;
  background:pink;
  margin-top:20px;
}

结果：

现在我们给.bro1新建一个BFC，并添加 overflow:hidden;，修改代码如下：

// html
<body>
  <div class='special'>
    <div class='bro1'></div>
  </div>
  <div class='bro2'> </div>
</body>

// css
.special{
  overflow:hidden; 
}

结果：

你看！margin合并消除了！

2）、包含浮动子元素

这也是我们今天的主要议题——为什么"overflow:hidden"能清除浮动的影响。
我们经常会在父元素里设置某个子元素浮动。浮动后，子元素脱离了文档流，使得父元素无法包住这个浮动的子元素。我们通常在父元素上设置一个clearfix的伪元素来清除浮动；同样，我们可以利用BFC可以包含浮动这一特性来清除浮动，例子已经在本文开头讲过。

我们对本文开头的例子作一个分析：当给.parent设置"overflow:hidden"时，实际上创建了一个超级属性BFC，此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

除了给.parent设置"overflow:hidden"，我们还可以设置"display:inline-block"、"position:absolute"、"float:left"等方式来创建一个BFC，从而达到包裹浮动子元素的效果（具体使用哪种方法要看项目需求）：

// css
.parent{
  /* 具体使用哪个要看界面设计的情况 */
  /* overflow: hidden; */
  /* display:inline-block; */
  /* position:absolute; */
  float:left;
}

结果：

好了，关于这个问题就总结到这里。CSS的很多属性看似简单，深究起来才发现自己了解的仅仅只是冰山一角，前端之路，道阻且长啊！

参考资料：

为什么"overflow:hidden"能清除浮动的影响

CSS中的overflow属性

关于CSS中的overflow属性

u010142437

关注

9
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
浅析CSS中的overflow属性

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。overflow属性的作用是规定当内容溢出元素框时发生的事情，定义溢出元素内容区的内容会如何处理。overflow有下面几种属性值，分别如下：1.visible：默认值。内容不会被修剪，会呈现在元素框之外。...
复制链接

扫一扫