HTML5 ----- 布局_html5 布局-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_64227183/article/details/128386740

本文介绍了网页布局中的两种重要技术——浮动布局和定位布局。浮动布局通过`float`属性实现元素的左右浮动，可能引起布局混乱，需用`clear`属性清除浮动影响。定位布局利用`position`属性，包括静态、绝对和相对定位，提供了更精确的元素控制。示例代码展示了如何在实际中应用这些概念。

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

浮动布局

定位布局

布局有以下情况：

1、表格布局

2、浮动布局

3、定位布局

4、弹性盒子布局

5、瀑布式布局

浮动布局

float: left 向左浮动 right 向右浮动 none 不浮动

该属性可以应用于任何元素

当元素有浮动属性的，会对其父元素或者后边的元素产生影响，会出现布局错乱的现象，可以通过消除浮动的方法来解决，浮动元素的影响

清除浮动 clear

一样有着：none(默认值),left(不允许左边有浮动),right(不允许右边有浮动),both(左右两侧不允许有浮动)

cursor 属性用于显示光标的形态

定位布局

position 定位布局是一种非常常用的一种布局方式

static 静态定位：页面中的每一个对象的默认值

absolute 绝对定位：将对象从文档流中分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在父级对象，则依据body对象

relative 相对定位：对象不从文档中分离，通过设置left、right、top、bottom四个方向相对于自身位置进行相对定位

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	*{
		margin:0;
		padding: 0;
	}
        #one{
        	width:200px;
        	height:200px;
        	background-color: red;
        	position: absolute;
        	top:200px;
        	left:200px;
        }

        #two{
        	width:200px;
        	height:200px;
        	background-color: green;

        }

        #three{
        	width:200px;
        	height:200px;
        	background-color: blue;
        }

        #main{
        	width: 800px;
        	height:800px;
        	border:1px solid black;
        	margin:0 auto;
        	position: relative;
        }

	</style>
</head>
<body>
<div id="main">
	<div id="one"></div>
	<div id="two"></div>
	<div id="three"></div>
</div>
</body>
</html>