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

列印頁面