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

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

jwz934738949

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

阅读量771

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/89601872

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

浮动元素排列规则：

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

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

jwz934738949

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浮动元素排列规则、贴靠与字围现象

浮动元素排列规则：相同方向上的浮动元素，先浮动的会显示在前面，后浮动的会显示在后面；元素浮动后的位置，由元素在标准流中的位置决定。<!doctype html><html> <head> <meta charset="UTF-8"> <title>标题</title> <style>.cc ...
复制链接

扫一扫