浮动、导航条和简单布局

最新推荐文章于 2024-07-25 14:15:14 发布

Massimo_ycw

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量587

点赞数

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

本文链接：https://blog.csdn.net/Massimo__JAVA/article/details/127389562

版权

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

摘要由CSDN通过智能技术生成

一、浮动

<!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>