CSS深入理解之overflow_技术问答

润晗代码

失效妙用overflow设置为hidden有啥意义呢？默认visible可以不大神解释下

仅对于 img 元素来说的话，overflow 的值是哪个都可以，因为对于 img 都会失效。

既然会失效，那为什么要用 overflow，而且是 hidden，那是因为与 img 同级的兄弟元素可能溢出容器范围。

那你问设置 visible: visible 可以嘛？当然可以，如果 img 元素的兄弟元素里的内容不会溢出容器的话。

再问既然都不会溢出，也没别的需求，那完全不用 overflow 可不可以？当然可以。因为此处用 overflow 完全就是为了防止内容溢出的，而不是防止 img 元素会怎么样怎样的。

总结一下：

0 首先明白，overflow 为什么会对案例中 img 元素无效

① 图片移到右侧使用的是 absolute 跟 text-align，与 overflow 无关

② overflow 只作用于与图片同级的非 absolute 元素里的内容，防止溢出容器

下面给个溢出效果的代码案例：

<div style="height: 300px;overflow:auto">
    <div class="h0 ovh tr" style="height: 700px;width: 600px;
               margin:0 auto;background-image: url(./53937347_p0.png);
               background-repeat: no-repeat;        
               background-position: center center;        
               background-size:cover">        
        &nbsp;
        下面就是会溢出的文本，所以父级会用 overflow: hidden;
        <br>
        dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd        
       <img class="abs ml30 mt30" style="height: 80px;" src="./53937347_p0.png" alt="">
    </div>    
</div>

2020-04-09 1回答·1160浏览

啥也不会就会扛

源代码还有吗: 2019-04-30 1回答·1395浏览

靠他吃饭

这个空格符起到什么做用？自己试了以下根本不需要啊！: 不是说占个位置而已吗，; 2018-07-31 1回答·1347浏览

妈妈说名字越长越好怎么滴

overflow失效妙用: 2017-09-26 3回答·1918浏览

慕粉1112086645

绝对定位和overflow

对于普通元素，overflow:hidden;会将固定宽高容器内溢出元素隐藏处理；但有些特殊布局例外。例如，部分浮动在容器之外的元素。

使用overflow:hidden;属性，如果其祖先元素，含有position:relative属性等，其后代元素中存在position:absolute属性时，含有position:absolute属性的元素溢出固定宽高的容器后，不会被隐藏。

2017-05-05 1回答·3559浏览

慕粉3407380

右侧图标像fixed一样固定怎么实现的: 2017-02-28 1回答·1537浏览

dky

跟随怎么使用: 已采纳慕粉3913390 的回答; fixed不要用position：absolute; 2016-11-22 1回答·1493浏览

刘颜

overflow元素自身为包含块？: 已采纳自然天下的回答; 任何position:absolute需要起作用，那么他的父元素就需要设置position:relative,否则就会一直往上找，直到body。因此，只要设置了自身position:relative,那么他自身就是包含块。; 2016-11-02 2回答·1608浏览

慕粉4042427

失效的妙用，无原代码很难理解，有的请提供，先谢

已采纳哔哩哔哩Hong 的回答

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
	<style>
		html,body{width:100%;height:100%;margin:0;padding:0;}
		.main{width:600px;height:100%;background:#ccc;margin:0 auto;}
		.list{height:0;text-align:right;overflow:hidden;}
		.rightlist{display:inline;position:fixed;bottom:100px;margin-left:20px;}
		.icon{display:block;width:30px;height:30px;border-radius:50%;background:#000;}
	</style>
</head>
<body>
	<!--中间的主界面-->
	<div class="main">
		<!--右边固定条-->
		<div class="list">
			&nbsp;
			<div class="rightlist">
				<a href="#" class="icon"></a>
			</div>
		</div>
		
	</div>
</body>
</html>

可以看老师的absolute，其实主要利用的应该还是absolute的追随性

原理：

list是块状元素，自己占了一行，text-align:right则其中的元素会在右边

将rightlist设为display:inline，本来rightlist会在&nbsp的右边

但rightlist设了position:fixed，则rightlist脱离了文档流，但由于追随性还会在原来的那一行，这样就可以固定在界面的右边了

而且此时，由于rightlist设置了position，overflow元素的子元素含有包含块，所以overflow失效，所以并不会将子元素rightlist隐藏

2016-10-25 2回答·1668浏览

慕粉3830774

老湿是如何实现absolute元素表现为fixed的？百思不得其解啊

已采纳 qq_巴萨最强_03768458 的回答

content外面加一层设置高度，出现滚动条就ok了

<style>
    .warp { height:300px; overflow-y:auto;}
    .content { width: 60%; height: 2000px; background: #999; margin: 0 auto;}
    .h0 { height: 0;}
    .ovh { overflow: hidden;}
    .tr { text-align: right;}
    .abs { position: absolute; width: 20px; height: 20px; background: #F00;}
    .ml10 { margin-left: 10px;}
    .mt30 { margin-top: 30px;}
</style>

<body>
<div class="warp">
 <div class="content">
   <div class="h0 ovh tr">
     &nbsp;<a class="abs ml10 mt30"></a>
   </div>
 </div>
</div>
</body>

2016-08-23 1回答·1991浏览

code前端

overflow妙用代码: 2015-08-09 3回答·1502浏览

慕渣渣

为什么我写的不会跟随？哪里不对？: 原来是把.abs 设置为fixed;; 2015-07-23 5回答·1292浏览

我家在玉堆

overflow失效妙用，无法实现: 这个怎么实现了？; 2015-05-20 4回答·2245浏览

luke_zhou

老师对包含快的解释不全面吧？: 2015-04-11 2回答·1744浏览

hero_猎

有这一讲的代码吗？: 2015-04-08 2回答·1301浏览

舞临天下

讲完overflow 下一个讲什么可以提前透露下吗: 2015-03-20 3回答·5079浏览