【布局】学习CSS布局12——浮动布局例子

最新推荐文章于 2025-05-26 20:21:04 发布

二木成林

最新推荐文章于 2025-05-26 20:21:04 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/cnds123321/article/details/84614022

笔记专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种使用CSS float属性实现网页响应式布局的方法，通过设置左侧导航栏的浮动和右侧主体内容的左外边距，使得页面在不同设备上能够自适应显示。文章详细解释了浮动清除的概念，确保了页面元素的正确排列。

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

完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。

代码实例：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.container {
			border:5px solid #6ac5ac;
			overflow:auto;
		}
		nav {
			float:left;
			width:200px;
			background-color: #d64087;
		}
		section {
			margin-left:200px;
			background-color: #fdc72f;
		}
		footer {
			background-color:#96c02e;
		}
	</style>
</head>
<body>
	<div class="container">
	<nav>
		<ul>
			<li><a href="#">static</a></li>
			<li><a href="#">relative</a></li>
			<li><a href="#">fixed</a></li>
			<li><a href="#">absoluted</a></li>
		</ul>
	</nav>
	<section>
		这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。
	</section>
	<br />
	<section>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
	</section>
	<br />
	<footer>
	</footer>
	</div>
</body>
</html>

效果图如下：