关于Div的overflow属性的一些理解

Posted 2023-03-21

参考技术A 前段时间做一个页面的时候，遇到一些样式上的问题：由于layout的关系，在我需要显示最外div横向滚动条和纵向滚动条时，遇到了一些阻碍，因此也借此机会，研究了一下div的overflow属性，下面给大家分享一下：

1.overflow属性多用于div，其作用是：规定当内容溢出元素框时发生的事情；

2.所有主流浏览器都支持 overflow 属性，因此可以放心使用；

3.overflow可分别设置x轴或者y轴（即overflow-x:，overflow-y:），也可以对两者同时进行设置（overflow:）

4.overflow有以下这些属性：

visible 默认值。内容不会被修剪，会呈现在div之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。（注：所有IE浏览器都不支持inherit属性）

普遍来说，auto属性比较常用，一般y轴都会生成滚动条，而x轴的滚动条并不多见。特别是使用了bootstrap等框架后，利用其分栏功能搭建的div，会有效利用浏览器的横向宽度（将100%的宽度等分成12格，如果一行排列的元素超过12格，则会自动换行），因此一般不会出现横向滚动条。

我上面说到遇到的具体问题是这样的：我的页面布局，是比较常见的，最外层是一个大div，当中的上部是设置菜单，左下是真正的菜单，右下是主体内容显示区域。我现在需要在右下的主体内容区域中做一个页面，这个页面会显示sql查询语句返回的内容，动态生成一个table，这个table的宽度可能会非常宽，因此我需要显示x轴滚动条。

如果单纯显示右下div的滚动条，那会有一个问题：如果页面高度很高（sql返回的结果数较多），则必须要将页面y轴滚动条拉动之最底端，才能看到x轴的滚动条，这显然是非常不方便的。

如果光设置最外层div的滚动条，则y轴会出现两个滚动条，这也是不能接受的。

最终的方案是这样的：
右下的div，overflow设置成visible，最外层的div，overflow设置成auto（当然，这只是针对我这个特殊的页面，因此直接在view里重写并覆盖html和body的overflow属性，其余页面不受影响）

大家可以根据自己的实际需要，试着调整一下overflow的属性，多试几次，自然会理解这几个属性的作用的区别了。

关于CSS中设置overflow属性的值为hidden的相关理解

包裹元素剪裁条件

是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪裁？答案是不一定，这要看此刻的CSS环境。

根据对CSS2.1规范的理解，可以这样表述：如果一个元素的包含块的overflow属性设置为hidden，那么超过这个包含块部分的内容就会被剪裁。

因此我们需要学会寻找一个元素的包含块，不过在这之前，让我们先简单的知道如果一个元素的overflow属性设置为hidden，被其包裹的内容如果溢出需要同时满足的条件：

• 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
• 内部溢出的元素是通过position:absolute绝对定位或position:fixed固定定位。

寻找包含块

什么是包含块？

根据CSS2.1规范里面的说明，简单的说就是：用来确定一个元素的盒子的位置和尺寸的矩形就叫这个元素的包含块。

寻找规则

因此包含块是一个非常有意义而且涉及属性很多的概念，至于如何确定一个元素的盒子的包含块是谁，遵循下面几条规则：

• 根元素的包含块

其包含块又叫初始包含块，可以先认为就是可视区域（其实不准确，姑且这样说比较简单）。

• 非根元素，且其position属性是relative和static的元素的包含块

它的包含块是由最近的祖先块容器盒的内容区域创建的。

• 非根元素，且其position属性是absolute的元素的包含块

它的包含块由最近的position不为static的祖先元素创建（如果没有找到这样的祖先元素，这个绝对定位的元素的包含块为初始包含块）；具体创建方法如下：

[1] 如果这个祖先元素是行内元素，包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域；

[2] 如果这个祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距+width区域。

为什么会清除浮动造成的影响

一个有趣的现象是：一个没有设置高度的父元素包裹一个子元素，父元素应该会被子元素撑起来，也就是有高了，不过如果你给子元素设置了浮动，显然原来父元素撑起来的高就塌了，到这里好像都很正常；接着，你给父元素加了一个overflow:hidden，发现父元素的高又有了，好像浮动被清除了一样，为什么会这样？

其实归根结底，这里的浮动没有清除，只是因为overflow属性的值是hidden的时候会形成一个BFC，而BFC就是一个隔离的渲染区域，因此浮动造成的高崩塌会导致对外部布局的影响，为了消除这种不益的表现，计算高度的时候浮动元素也计算进去了。

如果说到这里就停止，你可能会非常好奇，除了这里的情况还有什么情况会产生BFC，而BFC环境下具体会有哪些规则？接着下段来讲。

BFC（块级格式化上下文）

BFC是一个非常有用的环境，如果用一句话来说明它是什么样的存在：一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

如何触发BFC?

只需要保证满足下面至少一条就会触发BFC：

• 根元素body；
• 设置了float值不为none的元素；
• 设置了overflow属性不为visible的元素；
• 设置了属性position不为relative和static的元素；
• 设置了display的值为flex、table-cell、table-caption和inline-block中的任何一个的元素。

可以看出来，就是一个比较独立的块，因为是一个独立的环境，在开发时候适度使用会有效降低开发和维护难度。

BFC环境下的特性或规则

大致可以归纳为三个方面：独立性、垂直分布规则和水平分布规则。

• 独立性：BFC是页面上一个隔离的容器，和外面的关系是不会互相影响，对浮动而言也是，不会和浮动元素发生重叠，高也和上面提到的一样不会崩塌；
• 垂直分布规则：BFC的内部里面的一个个盒子在垂直方向一个接着一个排放，位置由margin决定，两个相邻的盒子margin会发生重叠；
• 水平分布规则：BFC里面的盒子的左外边缘和包含块的左边相接触，简单的理解就是水平方向不会发生margin重叠。