CSS - float（浮点）

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 属性。

可能的值

以下是可用于属性浮点的所有可能值：

none：元素不浮动。这是默认值。
left：元素浮动到其容器的左侧。
right：元素浮动在其容器的右侧。
inline-start：元素浮动到其包含块的起始侧。（对于 ltr 脚本，它的左侧，以及 rtl 脚本的右侧）。
inline-end：元素浮动到其包含块的末端。（对于 ltr 脚本，其右侧，以及 rtl 脚本的左侧）。

值 inline-start 和 inline-end 仅受 Firefox 和 Safari 浏览器支持。

适用于

所有元素，但如果 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>There are many variations of passages of Lorem Ipsum available,
	 	but the majority have suffered alteration insome form, by injected humour,
	 	or randomised words which don't look even slightly believable.
	 	</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>The first red color grid box is placed on the right side.</h3>
	 	<div class="grid-container">
	 	 	 <div class="grid-box" style="background-color:#f0610e;">
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	 	 </div>
	 	 	 <div class="grid-box" style="background-color:#86f00e;">
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</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>The first red color grid box is placed on the left side.</h3>
	 	<div class="grid-container">
	 	 	 <div class="grid-box" style="background-color:#f0610e;">
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	 	 </div>
	 	 	 <div class="grid-box" style="background-color:#86f00e;">
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS float - 图像彼此相邻

可以使用浮动元素创建简单的四列图像布局。浮点数：正确的属性位置容器内右侧的图像。

这是一个例子 -


<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>The first image is placed on the right side, while the rest of the images are also right aligned within the
	 	 	 container.</h4>
	 	<div class="grid-container">
	 	 	 <div class="grid-box">
	 	 	 	 	<img class="tutimg" src="images/orange-flower.jpg" width="100%" height="50%" />
	 	 	 	 	<p>Orange color flower</p>
	 	 	 </div>
	 	 	 <div class="grid-box">
	 	 	 	 	<img class="tutimg" src="images/see.jpg" width="100%" height="50%" />
	 	 	 	 	<p>see</p>
	 	 	 </div>
	 	 	 <div class="grid-box">
	 	 	 	 	<img class="tutimg" src="images/tree.jpg" width="100%" height="50%" />
	 	 	 	 	<p>Tree</p>
	 	 	 </div>
	 	 	 <div class="grid-box">
	 	 	 	 	<img class="tutimg" src="images/red-flower.jpg" width="100%" height="50%" />
	 	 	 	 	<p>Red color flower</p>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS Float - 弹性框

要在灵活的容器中创建两列布局，可以使用 display： flex 属性使 container 一个 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>Resize the browser window to see the effect.</h3>
	 	<div class="grid-container">
	 	 	 <div class="grid-box">
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
	 	 	 	 	 	 insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	 	 </div>
	 	 	 <div class="grid-box">
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
	 	 	 	 	 	 in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS Float - 导航菜单

可以使用 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="#tutorials" class="active-link">Tutorialspoint</a></li>
	 	 	 <li><a href="#home">Home</a></li>
	 	 	 <li><a href="#articles">Articles</a></li>
	 	 	 <li><a href="#courses">Courses</a></li>
	 	 	 <li><a href="#about">About</a></li>
	 	</ul>
</body>
</html>

CSS Float - 网页布局

您还可以使用 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="#tutorials" class="active-link">Tutorialspoint</a></li>
	 	 	 	 	<li><a href="#home">Home</a></li>
	 	 	 	 	<li><a href="#articles">Articles</a></li>
	 	 	 	 	<li><a href="#courses">Courses</a></li>
	 	 	 	 	<li><a href="#about">About</a></li>
	 	 	 </ul>
	 	</div>
	 	<div class="grid-container">
	 	 	 <div class="grid-box">
	 	 	 	 	<h1>Tutorialspoint</h1>
	 	 	 	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
	 	 	 	 	 	 insome form, by injected humour, or randomised words which don't look even slightly believable. There
	 	 	 	 	 	 are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
	 	 	 	 	 	 in some form, by injected humour, or randomised words which don't look even slightly believable.</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="images/orange-flower.jpg" width="100%" height="30%" />
	 	 	 </div>
	 	 	 <div class="images">
	 	 	 	 	<img class="tutimg" src="images/see.jpg" width="100%" height="30%" />
	 	 	 </div>
	 	 	 <div class="images">
	 	 	 	 	<img class="tutimg" src="images/tree.jpg" width="100%" height="30%" />
	 	 	 </div>
	 	 	 <div class="images">
	 	 	 	 	<img class="tutimg" src="images/red-flower.jpg" width="100%" height="30%" />
	 	 	 </div>
	 	</div>
	 	<div class="footer">
	 	 	 <h3>© 2023 Tutorialspoint</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>
	 	 	 There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 going to use a passage of Lorem Ipsum. <p>Tutorialspoint <br>CSS Float</p>
	 	 	 There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 </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>
	 	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
	 	 	 	 	 	<img class="tutimg" src="images/tutimg.png" />
	 	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 	 	 	of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	 	</p>
	 	 	 	 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	 	 some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 	 	 	of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	 	this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	 	<img class="tutimg" src="images/tutimg.png" />
	 	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are

	 	 	 	 	 	</p>
	 	 	</div>
	 </body>
	 </html>

CSS Float - 无浮动

为了防止图像浮动，您可以将 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>
	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 	 	oftext.you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 	 	All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.making this the first true generator on the Internet of text.
	 	 	 	 	<img class="tutimg" src="images/tutimg.png" />
	 	 	 	 	All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.
	 	 	 </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="images/tutimg.png" />
	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
	 	 	 	 	middle of text. you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 	 	All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making
	 	 	 	 	this the first true generator on the Internet of text.
	 	 	 	 	All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.<img class="tutimg2" src="images/tutimg.png" />repeat
	 	 	 	 	predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.first true generator on the Internet of text.
	 	 	 </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="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
	 	 	 	 	but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
	 	 	 	 	middle of text. All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary.<img class="tutimg2" src="images/tutimg.png" />Lorem Ipsum is simply
	 	 	 	 	dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
	 	 	 	 	unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
	 	 	 	 	five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
	 	 	 	 	popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
	 	 	 	 	with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long
	 	 	 	 	established fact that a reader will be distracted by the readable content of a page when looking at its layout.
	 	 	 	 	The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
	 	 	 	 	using 'Content here, content here', making it look like readable English.<img class="tutimg3" src="images/tutimg.png" />
	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
	 	 	 	 	middle of text.you need to be sure there isn't anything embarrassing hidden in the middle
	 	 	 	 	All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary.Lorem Ipsum has been the industry's standard dummy text ever since the
	 	 	 	 	1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	 	 	 </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="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
	 	 	 	 	but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. <img class="tutimg2" src="images/tutimg.png" />Lorem Ipsum is simply
	 	 	 	 	dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
	 	 	 	 	unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
	 	 	 	 	five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
	 	 	 	 	popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
	 	 	 	 	with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long
	 	 	 	 	established fact that a reader will be distracted by the readable content of a page when looking at its layout.
	 	 	 </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>
	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
	 	 	 	 	middle of text.<img class="tutimg1" src="images/tutimg.png" />you need to be sure there isn't anything embarrassing
	 	 	 	 	hidden in the middle. All the Lorem Ip generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making this the first true generator on the Internet of
	 	 	 	 	text.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
	 	 	 	 	industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
	 	 	 	 	scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into
	 	 	 	 	electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
	 	 	 	 	Letraset sheets containing Lorem Ipsum passages. <img class="tutimg2" src="images/tutimg.png" /> <img class="tutimg3" src="images/tutimg.png" />
	 	 	 	 	All the Lorem Ipsum 2enerators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
	 	 	 	 	this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
	 	 	 	 	repeat predefined chunks as necessary, making this the first true generator on the Internet of text.Contrary
	 	 	 	 	to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
	 	 	 	 	Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
	 	 	 	 	Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
	 	 	 	 	literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
	 	 	 </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>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 	 	this the first true genera tor on the Internet of text. making this the first true generator on the Internet of
	 	 	 	 	going to use a passage of Lorem Ipsum.don't look even slightly believable. sure there isn't anything
	 	 	 	 	<img class="tutimg1" src="images/tutimg.png" /> <img class="tutimg1" src="images/tutimg.png" />
	 	 	 	 	<img class="tutimg2" src="images/tutimg.png" /> <img class="tutimg3" src="images/tutimg.png" /><img
	 	 	 	 	class="tutimg1" src="images/tutimg.png" />tor on the Internet of text. making this the first true generator
	 	 	 	 	on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.making this the first true generator
	 	 	 	 	on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.
	 	 	 </p>
	 	</div>
</body>
</html>

CSS Float - 相关值

浮点数的一些示例如下：

属性	值
none	将 float 属性设置为 none 值。
left	将 float 属性设置为左侧值。
right	将 float 属性设置为正确的值。
inherit	将 float 属性设置为继承值。
intial	将 float 属性设置为初始值。

打印本页