田字格布局

最新推荐文章于 2025-04-25 10:28:02 发布

雙安

最新推荐文章于 2025-04-25 10:28:02 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS

本文链接：https://blog.youkuaiyun.com/xiongwanfeng/article/details/74820567

HTML/CSS 专栏收录该内容

24 篇文章

订阅专栏

本文详细解释了HTML中使用float属性进行布局的基本原理。包括float:left如何使元素在同一行显示，以及clear:left如何避免上方有浮动元素。通过具体示例帮助读者理解不同属性之间的交互作用。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动布局</title>
	<style type="text/css">
		#Lsite{
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
		#Rsite{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#Ldsite{
			width: 100px;
			height: 100px;
			background: gray;
			clear: left;
			float: left;
		}
		#Rdsite{
			width: 100px;
			height: 100px;
			background: orange;
			float: left;
		}
	</style>
</head>

<body>
	<div id="Lsite">我是1号</div>
	<div id="Rsite">我是2号</div>
	<div id="Ldsite">我是3号</div>
	<div id="Rdsite">我是4号</div>
</body>
</html>

首先有几点需要明确：

1.没有float属性的div不管它是多么小还是多么宽它都是独自占用一个行。

2.float:left是什么意思？

只要一个div加了float:left属性之后它就变得不再是一个独占一行的元素了。我们可以把浏览器的div分为两层，这就和两个平行的平面一样，所有没有float的属性的div都是下面那个平面的，并且因为它们各自独占一行所以它们相互紧靠着，当最上面的一个div变成float之后下面的div就要挤上来。而有float属性的div都是上面那个平面的，有了float属性的div由于不再独占一行了，所以同一行可以存在多个div，这些个div都在上面那个平面。

3.clear:left，如果某个div加上了这么个属性，意思就是说我这个div上面不允许有float:left属性的div。