2020-08-24

最新推荐文章于 2024-09-11 14:09:02 发布

鹦鹉好傻

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量124

点赞数

分类专栏：命里的坎儿文章标签： html css

本文链接：https://blog.csdn.net/m0_46927364/article/details/108196585

版权

命里的坎儿专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浮动布局疑问——左右浮动的元素互不干扰

最近在学习《HTML5布局之路》，书中对浮动布局的介绍中提到：

在浮动的过程中，左右浮动的模块并不互相干涉，左浮动的模块有可能会阻挡其他左浮动的模块，右浮动的模
块有可能会阻挡其他右浮动的模块。但是，无论左浮动还是右浮动，都会占据空间，因此在最终的空间占用上，
还是会互相有所影响。

书中所举例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5布局之路-浮动功能案例3</title>
	<link rel="stylesheet" href="reset.css">
	<style>
		.wrap {
			width: 600px;
			border: 5px solid black;
		}

		.box1 {
			float: left;
			width: 150px;
			height: 150px;
			background: #999;
		}

		.box2 {
			float: left;
			width: 150px;
			height: 300px;
			background: #ccc;
		}

		.box3 {
			float: right;
			width: 150px;
			height: 150px;
			background: blue;
		}

		.box4 {
			float: right;
			width: 150px;
			height: 150px;
			background: yellow;
		}
	</style>
</head>
<body>
	<div class="wrap clearfix">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box4">4</div>
	</div>
</body>
</html>

显示效果：

从图上第3个div的浮动轨迹可以知道，向右浮动的元素是可以穿过向左浮动的元素继续向上浮动然后再向右浮动。

之后参照书上的例子，我自己写了一段代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title> Complex Layout </title>
	<style>
		.wrap {
		width: 300px;
		border: 5px solid black;
		margin: 0px auto;
		}

		.box1 {
			float: left;
			width: 150px;
			height: 300px;
			background: blue;
			color: white;
		}

		.box2 {
			float: left;
			width: 150px;
			height: 200px;
			background: red;
		}

		.box3 {
			float: left;
			width: 150px;
			height: 150px;
			background: yellow;
		}

		.box4 {
			float: right;
			width: 150px;
			height: 150px;
			background: green;
		}

		.clearfix:after {
			display: block;
			clear: both;
			height: 0;
			content: "";
		}
	</style>
</head>
<body>

	<div class="wrap clearfix">
		<div class="box1">1 左浮动</div>
		<div class="box2">2 左浮动</div>
		<div class="box3">3 左浮动</div>
		<div class="box4">4 右浮动</div>
	</div>
</body>
</html>

显示效果如下：