Skip to content

溢出的处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				/* 容器 */
				border: solid 1px red;
				height: 200px;
				width: 150px;
				/* overflow: hidden; */
				/* overflow : scroll;*/
				/* overflow: auto; */
				overflow-x: scroll;
			}
			
			#d2{
				/* 出现移除的内容*/ 
				width: 180px;
				border: solid 2px green;
			}
			
		</style>
	</head>
	<body>
		
		<div id="d1">
			<div id="d2">222222</div>
			
		</div>
	</body>
</html>

overflow 配合着浮动父容器,解决父容器高度他塌陷的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.container{
				border: solid 1px blue;
				overflow:hidden;
			}
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left;
			}    

			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				
				float: left;
			}

			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				float: left;
				
			}
		</style>
	</head>
	<body>


		<div class="container">
		
			<div class="class1">我是块级元素1,没有设置浮动</div>

			<div class="class2">我是块级元素2,没有设置浮动222222222222222222222222222222222222222</div>

			<div class="class3">我是块级元素3,没有设置浮动</div>
		</div>
	

	</body>
</html>

Released under the MIT License.