Css 简明教程

CSS - float Property

CSS float 属性控制页面上内容的位置和格式。它将一个元素定位在容器的右侧或左侧，允许文字和其他内联元素环绕它。

The CSS float property controls the positioning and formatting of content on the page. It positions an element on the right or left side of the container, letting text and other inline elements to wrap around it.

float 属性使用块布局，因此在某些情况下会调整 * display* 属性的计算值：

The float property uses the block layout, hence it adjusts the computed value of the display property in certain cases:

Specified value

Computed value

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

本章讨论如何使用浮动属性。

This chapter discusses how to use float property.

Possible Values

以下是浮动属性可以使用的所有可能的值：

Following are all possible values that can be used for property float:

  1. none: The element does not float. This is the default value.

  2. left: The element floats to the left of its container..

  3. right: The element floats to the right of its container.

  4. inline-start: The element floats to the start side of its containing block. (For ltr scripts its left side, and the right side for rtl scripts).

  5. inline-end: The element floats to the end side of its containing block. (For ltr scripts its right side, and the left side for rtl scripts).

Applies to

所有元素都有，但如果值 display 为无，则无效。

All elements, but has no effect if the value of display is none.

Syntax

float = left | right | inline-start | inline-end | none

我们不能将元素浮动到容器的中心、顶部或底部——只能进行向左或向右浮动。

We can’t float elements to the center, top, or bottom of a container — only left or right float can be done.

以下示例演示了浮动属性及其值的使用：

Following example demonstrates usage of float property with its values:

<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 - Equal Width Columns

我们可以使用 float: right 属性在容器右侧浮动两个网格框，从而创建两个宽度相等的双栏布局。

We can create a two-columns layout with equal widths where two grid boxes are floated on the right side of a container using the float: right property.

示例如下：

Here is an example −

<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 - Equal Height Columns

使用 float: left 属性在容器左侧浮动两个网格框，创建两个高度相等、简单的双栏布局。

Create a simple two-columns layout with equal height where two grid boxes are floated on the left side of a container using the float: left property.

示例如下：

Here is an example −

<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 - Images Next To Each Other

可以使用浮动元素创建简单的四栏图像布局。 float: right 属性将图像定位到容器内的右侧。

A simple four-column images layout can be created using floating elements. The float: right property positions an image to the right within the container.

示例如下：

Here is an example −

<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 - Flexible Boxes

要在灵活容器中创建两栏布局，可以使用 display: flex 属性使容器成为 flex 容器，并且 flex-nowrap 属性确保即使缩小视窗宽度，flex 项也保持在单行中。

To create a two-column layout within a flexible container, you can use the display: flex property to make the container a flex container, and the flex-nowrap property ensures that the flex items remain in a single row even if the viewport width is reduced.

示例如下：

Here is an example −

<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 - Navigation Menu

可以使用 float 属性和 float: right 属性创建带有超链接列表的水平菜单。菜单链接使用 float: right 属性浮动到页面右侧。

You can use the float property to create a horizontal menu with a list of hyperlinks. The menu links float on the right of the page using float: right property.

示例如下：

Here is an example −

<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 - Web Layout

您还可以使用 float 属性浮动网站布局的内容。

You can also floats the contents of a website layout using float property.

在以下示例中，我们可以将导航菜单浮动到页面右侧，按钮浮动到左侧或右侧，以及一个浮动到右侧的图像。

In the following example, we can float the navigation menu to the right side of the page, buttons to the left or right side, and an image to the right side.

示例如下：

Here is an example −

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

可以在容器内浮动一个段落，并且容器中的其他元素将环绕它。

You can float a paragraph within a container, and the other elements in the container will wrap around it.

示例如下：

Here is an example −

<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 - Images With Margin

通过设置 float 和边距属性在容器内浮动图像，并且容器中的其他元素将环绕它。

Float images within a container by setting float and margin property, and the other elements in container will wrap around it.

示例如下：

Here is an example −

  <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 - No Floating

要防止图像浮动，可以将 float 属性设置为 none 值。

To prevent an image from floating , you can set the float property to none value.

示例如下：

Here is an example −

<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 - Floating To Left or Right

可以在 div 中向左或向右浮动图像，并且在图像上设置填充和边距。

It is possible to float images to the left and right within a div and have padding and margin on them.

示例如下：

Here is an example −

<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 - Images Overlapping

可以通过调整边距来使浮动图像重叠。要使两个浮动图像重叠，可以将其中一个图像的边距设置为负值。

We can overlap floating images by adjusting their margin. To overlap two floating images, you can set the margin of one of the images to a negative value.

示例如下：

Here is an example −

<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 - Images Not Adjacent

第一个图像放置在容器的左边缘，第二个图像放置在第一个图像的右侧，但不与其重叠。

The first image is placed at the left edge of the container, and the second image is placed to the right of the first image, but not overlapping it.

示例如下：

Here is an example −

<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 - Float Below Their Predecessors

我们可以通过将图像的边距设置为负值来使图像浮动在它的前身下方。

We can make an image float below its predecessor by setting the margin of the image to a negative value.

示例如下：

Here is an example −

<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 - To a New Line

如果当前行没有足够的空间容纳所有浮动，则剩余的浮动将被推到下一行。

If there is not enough space for all of the floats on the current line, the remaining floats will be pushed to the next line.

示例如下：

Here is an example −

<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 - Related Values

浮动的部分示例如下：

Some of the examples of the float are as follows:

property

value

none

Set the float property to the none value.

left

Set the float property to the left value.

right

Set the float property to the right value.

inherit

Set the float property to the inherit value.

intial

Set the float property to the initial value.