CSS float属性控制页面上内容的定位和格式。它将一个元素定位在容器的右侧或左侧，让文本和其他内联元素环绕它。
float 属性使用块布局，因此在某些情况下它会调整 display 属性的计算值：
| 指定值 | 计算值 |
|---|---|
| inline | block |
| inline-block | block |
| inline-table | table |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-caption | block |
| table-header-group | block |
| table-footer-group | block |
| inline-flex | flex |
| inline-grid | grid |
本章讨论如何使用 float 属性。
属性值
以下是可用于float属性的所有可能值:
none:元素不浮动。这是默认值。
left:元素浮动到其容器的左侧。
right:元素元素浮动到其容器的右侧。
inline-start:元素浮动到其包含块的开始侧。 （对于 ltr 脚本，其左侧；对于 rtl 脚本，其右侧）。
inline-end:元素浮动到其包含块的末尾。 （对于 ltr 脚本，其右侧；对于 rtl 脚本，其左侧）。
仅 Firefox 和 Safari 浏览器 支持 inline-start 和 inline-end 属性值。
适用范围
所有元素，但如果 display 的值为none，则无效。
语法
float = left | right | inline-start | inline-end | none 我们不能将元素浮动到容器的中心、顶部或底部 - 只能向左或向右浮动。
以下示例演示了 float 属性及其值的用法:
<html>
<head>
<style>
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: yellow;
}
.right {
float: right;
background: cyan;
}
.inherit{
float: inherit;
background: pink;
}
</style>
</head>
<body>
<div class="left">1</div>
<div class="right">2
<div class="inherit">3</div>
</div>
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</body>
</html> CSS float: 等宽列
我们可以创建一个等宽的两列布局，其中两个网格使用 float: right 属性，框浮动在容器的右侧。
这是一个示例 -
<html>
<head>
<style>
.grid-box {
float: right;
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>第一个红色网格框放置在右侧。</h3>
<div class="grid-container">
<div class="grid-box" style="background-color:#f0610e;">
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
</div>
<div class="grid-box" style="background-color:#86f00e;">
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
</div>
</div>
</body>
</html> CSS float: 等高列
创建一个高度相等的简单两列布局，其中使用 float: left 属性将两个网格框浮动在容器的左侧。
这是一个示例 -
<html>
<head>
<style>
.grid-box {
float: left;
width: 50%;
height: 200px;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>第一个红色网格框放置在左侧。</h3>
<div class="grid-container">
<div class="grid-box" style="background-color:#f0610e;">
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
</div>
<div class="grid-box" style="background-color:#86f00e;">
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
</div>
</div>
</body>
</html> CSS float: 图像彼此相邻
可以使用浮动元素创建简单的四列图像布局。 float: right 属性将图像定位在容器内的右侧。
这里是一个示例 -
<html>
<head>
<style>
.grid-box {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>第一个图像放置在右侧，而其余图像也在右侧对齐容器。</h4>
<div class="grid-container">
<div class="grid-box">
<img class="tutimg" src="/css/images/orange-flower.jpg" width="100%" height="50%" />
<p>Orange color flower</p>
</div>
<div class="grid-box">
<img class="tutimg" src="/css/images/see.jpg" width="100%" height="50%" />
<p>see</p>
</div>
<div class="grid-box">
<img class="tutimg" src="/css/images/tree.jpg" width="100%" height="50%" />
<p>Tree</p>
</div>
<div class="grid-box">
<img class="tutimg" src="/css/images/red-flower.jpg" width="100%" height="50%" />
<p>Red color flower</p>
</div>
</div>
</body>
</html> CSS float: 灵活框
创建一个在柔性容器内的两列布局中，您可以使用 display: flex 属性使容器成为 Flex 容器，并且 flex-nowrap 属性可确保即使视口宽度减小，Flex 项目仍保留在单行中。
这是一个示例 -
<html>
<head>
<style>
.grid-container {
display: flex;
flex-wrap: nowrap;
background-color: #f0610e;
}
.grid-box {
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
background-color: #86f00e;
margin: 15px;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>调整浏览器窗口大小以查看效果。</h3>
<div class="grid-container">
<div class="grid-box">
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
</div>
<div class="grid-box">
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
</div>
</div>
</body>
</html> CSS float: 导航菜单
您可以使用浮动属性创建带有超链接列表的水平菜单。菜单链接使用 float: right 属性浮动在页面右侧。
这是一个示例 -
<html>
<head>
<style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
</style>
</head>
<body>
<ul>
<li><a href="#yxjc" class="active-link">yxjc123.com</a></li>
<li><a href="#home">首页</a></li>
<li><a href="#articles">文章</a></li>
<li><a href="#courses">课程</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html> CSS float: Web 布局
您可以还可以使用 float 属性浮动网站布局的内容。
在下面的示例中，我们可以将导航菜单浮动到页面的右侧，将按钮浮动到左侧或右侧，并将图像浮动到页面的左侧或右侧。
这是一个示例 -
<html>
<head>
<style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
margin: 5px;
padding: 0;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
.grid-container {
display: flex;
flex-wrap: nowrap;
}
.grid-box {
width: 100%;
height: 400px;
padding: 50px;
box-sizing: border-box;
text-align: center;
margin: 5px;
background-color: #f0ac0e;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
.btn1 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: right;
margin: 10px;
}
.btn2 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: left;
margin: 10px;
}
.image-container {
background-color: #f00ed2;
padding: 10px;
margin: 5px;
}
.images {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.image-container::after {
content: "";
clear: both;
display: table;
}
.footer {
padding: 20px;
text-align: center;
background: #67a482;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#yxjc" class="active-link">yxjc123.com</a></li>
<li><a href="#home">首页</a></li>
<li><a href="#articles">文章</a></li>
<li><a href="#courses">课程</a></li>
<li><a href="#about">关于</a></li>
</ul>
</div>
<div class="grid-container">
<div class="grid-box">
<h1>yxjc123.com</h1>
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。</p>
<button class="btn1">HTML</button>
<button class="btn1">CSS</button>
<button class="btn2">Bootstrap</button>
<button class="btn2">React</button>
</div>
</div>
<div class="image-container">
<div class="images">
<img class="tutimg" src="/css/images/orange-flower.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="/css/images/see.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="/css/images/tree.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="/css/images/red-flower.jpg" width="100%" height="30%" />
</div>
</div>
<div class="footer">
<h3>© 2023 yxjc123.com</h3>
</div>
</body>
</html> CSS float: 段落
您可以在容器中浮动段落，并在容器中浮动其他元素容器将包裹它。
这里是一个例子 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
font-size: large;
}
p {
float: right;
width: 150px;
height: 50px;
margin: 0 1em 1em;
padding: 5px;
text-align: center;
border: 2px solid #000000;
background-color: #f0610e;
}
</style>
</head>
<body>
<div>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 <p>yxjc123.com <br>CSS Float</p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</div>
</body>
</html> CSS float: 带边距的图像
通过设置 float 和 margin 属性使容器内的图像浮动，而其他元素则在容器将环绕它。
这里是一个示例 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: left;
border: 3px solid #f0610e;
margin: 10px;
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
<img class="tutimg" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
<img class="tutimg" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS float: 无浮动
要防止图像浮动，您可以设置浮动属性为none值。
这里是一个示例 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
<img class="tutimg" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS float: 向左或向右浮动
可以将图像向左或向右浮动就在 div 内，并在其上有填充和边距。
这是一个示例 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 10px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
</style>
</head>
<body>
<div>
<p> <img class="tutimg1" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。<img class="tutimg2" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS float: 图像重叠
我们可以通过以下方式重叠浮动图像调整他们的保证金。要重叠两个浮动图像，您可以将其中一个图像的边距设置为负值。
这里是一个示例 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-left: -5px;
margin-right: 5px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p><img class="tutimg1" src="/css/images/tutimg.png" />CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。<img class="tutimg2" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。<img class="tutimg3" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS float: 图像不相邻
第一个图像放置在容器的左边缘，第二个图像放置在第一个图像的右侧，但不与其重叠。
这里是一个示例 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
width: 600px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 320;
height: 150px;
margin-right: 5px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 320px;
height: 150px;
margin-left: 5px;
}
</style>
</head>
<body>
<div>
<p><img class="tutimg1" src="/css/images/tutimg.png" />CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。<img class="tutimg2" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS float: 浮在其前身下方
我们可以通过将图像的边距设置为负值来使图像浮在其前身下方。
这里是一个例子 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-right: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 200px;
height: 80px;
margin-top: -5px;
margin-right: 5px;
}
.tutimg3 {
float: right;
border: 3px solid #f0610e;
width: 100px;
height: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。<img class="tutimg1" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。<img class="tutimg2" src="/css/images/tutimg.png" /> <img class="tutimg3" src="/css/images/tutimg.png" />
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS float: 到新行
如果当前行上的所有浮动没有足够的空间，剩余的浮动将被推到下一行
这是一个示例 -
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
width: 40%;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 100px;
height: 60px;
}
.tutimg4 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
<img class="tutimg1" src="/css/images/tutimg.png" /> <img class="tutimg1" src="/css/images/tutimg.png" />
<img class="tutimg2" src="/css/images/tutimg.png" /> <img class="tutimg3" src="/css/images/tutimg.png" /><img
class="tutimg1" src="/css/images/tutimg.png" />CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS Float: 相关值
浮动的一些示例如下: