网页布局

最新推荐文章于 2025-07-14 17:00:18 发布

原创最新推荐文章于 2025-07-14 17:00:18 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

本文深入解析了网页布局的三种主要方式：标准流排版、浮动流排版和定位流排版。介绍了每种布局方式的特点及适用场景，如标准流排版的水平和垂直排版，以及浮动流排版的元素宽度和高度设置方法。

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

网页布局方式实际上就是对网页中的元素进行排版

网页布局分为标准流排版、浮动流排版、定位流排版。

1、标准流排版方式

标准流排版方式就是网页默认的的排版方式。

标准流排版方式分为两种：水平排版、垂直排版。

如果元素是行内元素与行内块级元素的话，就使用水平排版；如果是块级元素就使用垂直排版。

2、浮动流排版方式

浮动流排版方式不会区分行内元素、块级元素与行内块级元素，不论是什么元素都可以设置宽高。

浮动流排版只有水平排版方式，用于设置元素左居中或是右居中。

浮动流中没有居中设置，像是center以及margin: 0 auto都无法使用。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.c1 {
	height: 100px;
	width: 100px;
	background-color: red;
	float: left;
}
.c2 {
	height: 100px;
	width: 100px;
	background-color: green;
	float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>