HTML——float浮动布局

最新推荐文章于 2024-09-11 08:17:43 发布

Jhinhua

最新推荐文章于 2024-09-11 08:17:43 发布

阅读量308

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104906028

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

float浮动布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				/* 流式布局中 是块级标签 独占一行 */
			}
			.div1{
				background-color: palegoldenrod;
			}
			.div2{
				background-color: palevioletred;
				/* 将 div2设置为浮动布局 --- 将其z轴发生变化
				 div2 在xy平面系中的位置上就没有了 上升了一个维度
				 div3 上方的位置因此就空出来了， 流式布局中 这个位置没有标签占用
				 下方的标签就会向上方移动
				 */
				/* 从左向右浮动 也就是如果有多个标签的话 会从左向右布局 */
				float: left;
			}
			.div3{
				background-color: plum;
			}
		</style>
	</head>
	<body>
		<!-- 既有流式布局 又有浮动布局 -->
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: red;
				color: white;
				text-align: center;
				line-height: 200px;
				margin: 5px;
			}
			.div_float{
				/* 从左向右浮动布局 left
				从右向左布局 right
				*/
				float: right;
			}
			/* 现在是既要显示浮动布局的内容 又有显示流式布局的内容
			 浮动布局不能遮挡流式布局：
				解决这个问题：让流式布局在浮动布局的下方开始布局就不会出现遮挡的情况了
				怎么设置这个呢？
					样式 clear ---> 清除浮动
						让标签在浮动布局的下方开始布局
			 */
			.clear_float{
				/* left:  表示在从左向右的浮动布局的下方开始布局 
				right: 表示在从右向左的浮动布局的下方开始布局 
				both: 不管什么浮动  都从其下方开始布局
				*/
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="div_float">1</div>
		<div class="div_float">2</div>
		<div class="div_float">3</div>
		<div class="div_float">4</div>
		<div class="clear_float">5</div>
		<div>6</div>
	</body>
</html>