浮动、导航条和简单布局

最新推荐文章于 2025-04-10 11:10:14 发布

Massimo_ycw

最新推荐文章于 2025-04-10 11:10:14 发布

阅读量663

点赞数

分类专栏： HTML 文章标签： css html

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/127389562

版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS中的浮动特性，包括浮动的作用和特点，并探讨了如何利用浮动来创建有效的导航条，同时讲解了基于浮动的简单网页布局技巧。

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

一、浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
				/* 
				 通过浮动可以使一个元素 向其父元素的左侧或右侧移动
				 使用float 属性来设置于元素的浮动
				 可选值:
				 none
				 默认值， 元素不浮动
				 left 元素向左浮动
				 right元素向右浮动
				 注意，元素设置浮动以后，水平布局的等式便不需要强制成立
				 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
				 所以元素下边的还在文档流中的元素会自动向上移动
				 
				 浮动的特点:
				 1、浮动元素会完全脱离文档流，不再占据文档流中的位置
				 2、设置浮动以后元素会向父元素的左侧或右侧移动，
				 3、浮动元素默认不会从父元素中移出
				 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
				 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
				 6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
				 */
				float: left;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				float: left;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

二、浮动的特点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 50px;
				height: 50px;
				background-color: #bfa;
				float: left;
				/* 
				 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，
				 所以我们可以利用浮动来设置文字环绕图片的效果
				 */
			}
			
			.box2{
				background-color: #00FFFF;
				float: left;
			}
			
			span{
				width: 100px;
				height: 100px;
				background-color: #FFFF00;
				/* 
				 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生改变
				 脱离文档流的特点:
				 块元素:
				 1、块元素不在独占页面的一行
				 2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
				 
				 行内元素:
				 行内元素脱高文档流以后会变成块元素，特点和块元素一样
				 脱离文档流以后，不需要再区分块和行内了
				 */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<p>
			java全栈工程师是指同时具备前端和后台能力，并能利用多种技能独立完成产品的人。Java全栈工程师需要具备的
			技能: 1、熟练使用多种框架; 2、 能够独立搭建运营环境; 3、 能够独立进行数据库建模设计; 4、能完成有相应的系统
			架构和性能调优; 5、熟悉Hadoop、redis、 及相关NOSQL开发。
		</p>
		<div class="box2">Hello Massimo!</div><br /><br />
		<span>我是一个span</span>
	</body>
</html>

三、导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.nav{
				width: 1205px;
				height: 48px;
				background-color: #BBFFAA;
				list-style: none;
				margin: 100px auto;
			}
			.nav li{
				line-height: 48px;
				float: left;
			}
			a{
				display: block;
				text-decoration: none;
				color: black;
				font-size: 18px;
				padding: 0 39px;
			}
			a:hover{
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">HTML/CSS</a>
			</li>
			<li>
				<a href="#">Browser Side</a>
			</li>
			<li>
				<a href="#">Server Side</a>
			</li>
			<li>
				<a href="#">Programming</a>
			</li>
			<li>
				<a href="#">XML</a>
			</li>
			<li>
				<a href="#">Web Building</a>
			</li>
			<li>
				<a href="#">Reference</a>
			</li>
		</ul>
	</body>
</html>

四、简单布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			header,main,footer{
				width: 1000px;
				margin: 0 auto;
			}
			header{
				height: 150px;
				background-color: silver;
			}
			main{
				height: 500px;
				background-color: #bfa;
				margin: 10px auto;
			}
			nav,article,aside{
				height: 100%;
				float: left;
			}
			nav{
				width: 200px;
				background-color: yellow;
			}
			article{
				width: 580px;
				background-color: orange;
				margin: 0 10px;
			}
			aside{
				width: 200px;
				background-color: pink;
			}
			footer{
				height: 150px;
				background-color: tomato;
			}
		</style>
	</head>
	<body>
		<!-- 网页头部 -->
		<header></header>
		
		<!-- 网页主题 -->
		<main>
			<!-- 左侧导航栏 -->
			<nav></nav>
			
			<!-- 中间内容 -->
			<article></article>
			
			<!-- 右边内容 -->
			<aside></aside>
		</main>
		
		<!-- 网页底部 -->
		<footer></footer>
	</body>
</html>