                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之overflow

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

失效的妙用

慕粉4042427

2016-10-25

源自：CSS深入理解之overflow 4-1

关注问题我要回答

1538

操作

收起

2 回答

哔哩哔哩Hong 回答被采纳 +3 积分
2016-10-27

<!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隐藏