浮动元素排列规则、贴靠与字围现象

最新推荐文章于 2023-02-24 19:12:57 发布

jwz934738949

最新推荐文章于 2023-02-24 19:12:57 发布

阅读量826

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML与CSS

本文链接：https://blog.youkuaiyun.com/jwz934738949/article/details/89601872

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

本文深入解析浮动元素在网页布局中的行为特性，包括排列规则、贴靠现象及字围效应，通过实例代码展示不同方向浮动元素如何影响页面布局。

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

浮动元素排列规则：

相同方向上的浮动元素，先浮动的会显示在前面，后浮动的会显示在后面；
元素浮动后的位置，由元素在标准流中的位置决定。

<!doctype html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>标题</title>
	<style>
.cc {
	height: 800px;
	width: 800px;
	border: 1px solid;
}
.c1 {
	height: 100px;
	width: 100px;
	background-color: red;
	float: left;
}
.c2 {
	height: 200px;
	width: 200px;
	background-color: blue;
	float: left;
}
.c3 {
	height: 50px;
	width: 100px;
	background-color: yellow;
	float: left;
}
.c4 {
	height: 100px;
	width: 100px;
	background-color: red;
	float: right;
}
.c5 {
	height: 200px;
	width: 200px;
	background-color: blue;
	float: right;
}
.c6 {
	height: 50px;
	width: 50px;
	background-color: yellow;
	float: right;
}
</style>
	</head>
	<body>
    <div  class="cc">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c4"></div>
      <div class="c5"></div>
      <div class="c6"></div>
    </div>
</body>
</html>

浮动元素贴靠现象：

当同一方向上的浮动元素超过父元素的宽度时，浮动元素会自动与上一元素贴靠在同一个元素上。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.cc {
	height: 400px;
	width: 300px;
	border: 1px solid;
}
.c1 {
	height: 300px;
	width: 100px;
	background-color: red;
	float: left;
}
.c2 {
	height: 200px;
	width: 200px;
	background-color: blue;
	float: left;
}
.c3 {
	height: 50px;
	width: 100px;
	background-color: yellow;
	float: left;
}
</style>
</head>
<body>
<div  class="cc">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
</div>
</body>
</html>

浮动元素字围现象：

当存在两个元素，一个元素为浮动元素，而另一个元素为标准元素时，标准元素中的内容会自动围绕在浮动元素四周。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.c1 {
	height: 50px;
	width: 50px;
	background-color: red;
	float: left;
}
.c2 {
	height: 200px;
	width: 200px;
	background-color: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
</body>
</html>