html和CSS基础学习（八）-优快云博客

本文介绍了 CSS 中 overflow 属性的应用场景及其如何解决子元素溢出的问题，并通过实例展示了元素浮动的基本用法及如何实现元素的水平排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

overfolw：对溢出元素的处理（子元素的内容超出父元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 200px;
				height:200px ;
				background-color: red;
				/*overflow: auto;这个比较智能化可以自动调节滚动框*/
				overflow: scroll;
			}
			.box2{
				width: 100px;
				height:500px ;
				/*子元素的高度超过父元素的高度叫做溢出*/
				background-color: green;
				
			}
			
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

元素的浮动

（1）在游览器中，块元素默认在文档流中垂直排列

图片默认垂直排列

为了让元素水平排列我们可以使元素脱离文档流，如图所示向左浮动；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: green;
				float: left;
				
			}
			
			.box3{
				width: 100px;
				height: 100px;
				background-color: gold;
				float: left;
			}
			
		</style>
		
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		
		
	</body>
</html>