CSS - float 属性

CSS 的float 属性控制页面上内容的定位和格式。它将元素定位在其容器的右侧或左侧，允许文本和其他内联元素环绕它。绝对定位的元素不受此属性的影响。

语法

float: none | left | right | initial | inherit;

属性值

值	描述
none	元素不浮动。默认值。
left	元素浮动到其容器的左侧。
right	元素浮动到其容器的右侧。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS Float 属性示例

以下示例说明了使用不同值的 float 属性。

带有 None 值的 CSS Float 属性

为了防止将元素定位到容器的左侧或右侧，我们使用none值。none 值确保元素不浮动并保留在正常的文档流中。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container img {
         float: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: none
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150/>
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

带有 Left 值的 CSS Float 属性

要将元素定位到容器的左侧，我们使用left值。left 值将元素定位到左侧，周围的元素环绕它，要防止这种环绕，我们可以使用clear属性。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container img {
         float: left;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: left
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150/>
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

带有 Right 值的 CSS Float 属性

要将元素定位到容器的左侧，我们使用right值。right 值将元素定位到右侧，周围的元素环绕它，要防止这种环绕，我们可以使用clear属性。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container img {
         float: right;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: right
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150/>
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

将 Clear 属性与 Float 属性一起使用

float 属性将元素定位到左侧或右侧，因此周围的元素会环绕这些元素。为了防止这种环绕，我们可以使用clear，这使得它们出现在浮动元素下方。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container1 img {
         float: left;
      }

      .float-container1 p {
         clear: left;
      }

      .float-container2 img {
         float: right;
      }

      .float-container2 p {
         clear: right;
      }

      .float-container3 #left {
         float: left;
      }

      .float-container3 #right {
         float: right;
      }

      .float-container3 p {
         clear: both;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: left, clear: left
   </h4>
   <div class="float-container float-container1">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 />
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
   <h4>
      float: right, clear: right
   </h4>
   <div class="float-container float-container2">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 />
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
   <h4>
      float: left, right, clear: both
   </h4>
   <div class=" float-container float-container3">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 id="left" />
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 id="right" />
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
float	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

打印页面