一、overflow:visible效果
在CSS中，overflow属性用于控制元素内容溢出时的显示方式。当overflow属性值为visible时，元素内容会强制呈现在容器之外，无论元素的尺寸如何，这常常被认为是该属性唯一正确的使用方式。例如：
<div style="width: 100px; height: 100px; overflow: visible;">
<p>这是一个很长的段落，它将会溢出容器。</p>
</div>
上述代码中，元素”div”的宽和高为100px，内部包含一个长段落。由于overflow属性值为visible，该段落会强制呈现在元素”div”之外，这也就是overflow:visible的基本效果。
二、overflow:visible无效
虽然overflow:visible看起来非常简单，但是在某些情况下，它可能会失效。下面我们来看一下这些情况：
1. 父元素为绝对定位
如果父元素设置了”position: absolute”，并且其超出边界的子元素也设置了overflow:visible，那么这些子元素将始终被裁剪在父元素边界之内。
<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; overflow: visible;">
<div style="width: 200px; height: 200px; background-color: red; position: relative; left: -50px; top: -50px; overflow: visible;"></div>
</div>
上述代码中，父元素”div”设置为绝对定位，它的宽度和高度均为100px，overflow属性值为visible。子元素”div”设置了宽和高为200px，并相对定位同时向左上偏移了50px。由于overflow:visible无效，子元素会被裁剪在了父元素之内。
2. 子元素为浮动元素
和绝对定位的父元素一样，如果溢出边界的子元素是浮动元素，那么其overflow:visible同样会失效。
<div style="width: 100px; height: 100px; overflow: visible;">
<div style="float: left; width: 200px; height: 200px; background-color: green; position: relative; left: -50px; top: -50px; overflow: visible;"></div>
</div>
上述代码中，同样是一个宽高为200px的子元素被设置了相对定位，并向左上偏移了50px，但这个子元素现在被设置成了浮动元素。结果和上述情况一样，overflow:visible无效，子元素被裁剪在父元素之内。
三、overflow:visible什么意思
我们已经知道，overflow属性用于控制元素内容的溢出方式，而当它的值为visible时，元素的溢出部分将强制呈现在容器外面，而不是被剪裁或滚动隐藏。这是overflow:visible的意义所在。
当遇到上述情况，overflow:visible失效，元素内容被裁剪或隐藏，实际上是因为被溢出的内容被删除了，或者滚动到了看不见的部分，因此无法再通过任何方式进行计算和渲染，即使overflow属性值设置成了visible也无济于事。
四、小结
我们简单地学习了overflow:visible的基本效果、无效情况以及意义所在。虽然看起来很简单的属性可能会因为一些细节问题而出现不同的效果，我们需要严谨地学习和理解对应的CSS规则，以便将其应用到实际工作中。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/271467.html
微信扫一扫 
支付宝扫一扫 