CSS-定位机制--决定盒子的摆放位置定位机制（文档流浮动定位层定位）2---浮动定位部分

最新推荐文章于 2022-07-15 19:47:58 发布

¡Venceremo

最新推荐文章于 2022-07-15 19:47:58 发布

阅读量238

点赞数 1

分类专栏： CSS 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125810396

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

2.浮动定位float,脱离文档流让盒子浮动起来 left左浮动 right右浮动 none不浮动

应用：在图文混排的时候、多列布局

浮动时候原有的位置丢失，其他元素占据它的位置

clear:清除浮动

clear:both 清除两边浮动 left，right只能清除一个方向的浮动（实现单栏浮动）

none默认值

实现页面的三行的结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
			/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#header{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 100px;
				background-color: red;
				margin-bottom: 5px;	
				
			}
			#main{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 330px;
				background-color: orange;
				margin-bottom: 5px;	
			}
			#footer{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 60px;
				background-color: green;
			}

		</style>

	</head>

	<body>
		<div id="container">
			<div id="header"></div>
			<div id="main"></div>
			<div id="footer"></div>
		</div>
		
	</body>

</html>

实现页面的两列的结构：使用浮动布局

法一：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
			/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#aside{
				/*分左右 使用浮动布局*/
				float: left;
				width: 300px;
				height: 500px;
				background-color: orange;
			}
			#content{
				float: right;
				width: 685px;
				height: 500px; /*高度宽度一定要设置*/
				background-color: black;
			}
		</style>

	</head>

	<body>
		<div id="container">
			<div id="aside"></div>
			<div id="content"></div>
		</div>
		
	</body>

</html>

法二:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
			/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#aside{
				/*分左右 使用浮动布局*/
				float: left;
				width: 300px;
				height: 500px;
				background-color: orange;
				margin-right:15px ;
			}
			#content{
				float: left;
				width: 685px;
				height: 500px; /*高度宽度一定要设置*/
				background-color: black;
			}
		</style>

	</head>

	<body>
		<div id="container">
			<div id="aside"></div>
			<div id="content"></div>
		</div>
		
	</body>

</html>

结合页面的3行两列：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
				/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#header{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 100px;
				background-color: red;
				margin-bottom: 5px;	
				
			}
			#main{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 330px;
				background-color: #ccc;
				margin-bottom: 5px;	
			}
			#aside{
				/*分左右 使用浮动布局*/
				float: left;
				height: 330px;
				width: 300px;
				background-color: orange;
				margin-right: 10px;
			
			}
			#content{
				float: left;
				height: 330px;
				width: 690px;
				background-color: black;
			}
			#footer{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 60px;
				background-color: green;
			}
			
		</style>

	</head>

	<body>
		<div id="container">
			<div id="header"></div>
			<div id="main">
				<div id="aside"></div>
				<div id="content"></div>
			</div>
			<div id="footer"></div>
		</div>
		
	</body>

</html>

实现页面的四行三列：（alt+shfit+数字实现分栏使用快捷键link:css引用样式表）

css部分

/*将默认的样式清零*/
*{
	padding: 0;
	margin: 0;
}
body{
	font-size: 14px;/*字号*/
}
#container{
	width: 1000px;
	margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
	height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
	background-color: blue;
}
#header{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 100px;
	background-color: red;
	margin-bottom: 5px;	
	
}
#nav{
	height: 90px;
	background-color: orange;
	margin-bottom: 5px;	

}
#main{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 200px;
	background-color: #ccc;
	margin-bottom: 5px;	
}
.aside{
	/*分左右 使用浮动布局*/
	float: left;
	height: 200px;
	width: 190px;
	background-color: yellow;
}
#content{
	float: left;
	height: 200px;
	width: 600px;
	background-color: black;
	margin-right: 10px;
	margin-left: 10px;
}
#footer{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 100px;
	background-color: green;
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<link rel="stylesheet" href="css/style1.css">

	</head>

	<body>
		<div id="container">
			<div id="header"></div>
			<div id="nav"></div>
			<div id="main">
				<div id="aside1" class="aside"></div>
				<div id="content"></div>
				<div id="aside2" class="aside"></div>
			</div>
			<div id="footer"></div>
		</div>
		
	</body>

</html>