CSS - float（浮点）_CSS 菜鸟教程

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

语法

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

属性值

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

CSS Float 属性示例

以下示例说明了具有不同值的 float 属性。

CSS Float 属性 - None 值

为了防止元素定位到容器的左侧或右侧，我们使用 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 属性
   </h2>
   <h4>
      float: none
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" alt="qikepu" height=150 width=150/>
      <p>
HTML代表超文本标记语言，HTML 用于创建任何网页的内容和结构。
如果你把人体看作一个网页，那么HTML就是身体的骨架。它是网页的构建块。
Python 是一种非常流行的通用解释型、交互式、面向对象的高级编程语言。
Python 是动态类型和垃圾回收编程语言。它由 Guido van Rossum 在 1985-1990 年期间创建。
JavaScript 是一种轻量级的解释型编程语言。它通常用于在 Web 应用程序中创建动态和交互式元素。
JavaScript 非常容易实现，因为它与 HTML 集成在一起。它是开放和跨平台的。
      </p>
   </div>
</body>

</html>

CSS Float 属性 - Left 值

要将元素定位到容器的左侧，我们使用 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 属性
   </h2>
   <h4>
      float: left
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" alt="启科普" height=150 width=150/>
      <p>
HTML代表超文本标记语言，启科普 用于创建任何网页的内容和结构。
如果你把人体看作一个网页，那么HTML就是身体的骨架。它是网页的构建块。
Python 是一种非常流行的通用解释型、交互式、面向对象的高级编程语言。
Python 是动态类型和垃圾回收编程语言。它由 Guido van Rossum 在 1985-1990 年期间创建。
JavaScript 是一种轻量级的解释型编程语言。它通常用于在 Web 应用程序中创建动态和交互式元素。
JavaScript 非常容易实现，因为它与 HTML 集成在一起。它是开放和跨平台的。
      </p>
   </div>
</body>
</html>

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 属性
   </h2>
   <h4>
      float: right
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" alt="qikepu" height=150 width=150/>
      <p>
HTML代表超文本标记语言，HTML用于创建任何网页的内容和结构。
如果你把人体看作一个网页，qikepu.com，那么HTML就是身体的骨架。它是网页的构建块。
Python 是一种非常流行的通用解释型、交互式、面向对象的高级编程语言。
Python 是动态类型和垃圾回收编程语言。它由 Guido van Rossum 在 1985-1990 年期间创建。
JavaScript 是一种轻量级的解释型编程语言。它通常用于在 Web 应用程序中创建动态和交互式元素。
JavaScript 非常容易实现，因为它与 HTML 集成在一起。它是开放和跨平台的。
      </p>
   </div>
</body>

</html>

Float 属性和 Clear 属性一起使用

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 属性
   </h2>
   <h4>
      float: left, clear: left
   </h4>
   <div class="float-container float-container1">
      <img src="/css/images/tutimg.png" alt="qikepu" height=150 width=150 />
      <p>
HTML代表超文本标记语言，HTML用于创建任何网页的内容和结构。
如果你把人体看作一个网页，qikepu.com，那么HTML就是身体的骨架。它是网页的构建块。
Python 是一种非常流行的通用解释型、交互式、面向对象的高级编程语言。
Python 是动态类型和垃圾回收编程语言。它由 Guido van Rossum 在 1985-1990 年期间创建。
JavaScript 是一种轻量级的解释型编程语言。它通常用于在 Web 应用程序中创建动态和交互式元素。
JavaScript 非常容易实现，因为它与 HTML 集成在一起。它是开放和跨平台的。
      </p>
   </div>
   <h4>
      float: right, clear: right
   </h4>
   <div class="float-container float-container2">
      <img src="/css/images/tutimg.png" alt="qikepu" height=150 width=150 />
      <p>
HTML代表超文本标记语言，HTML用于创建任何网页的内容和结构。
如果你把人体看作一个网页，qikepu.com，那么HTML就是身体的骨架。它是网页的构建块。
Python 是一种非常流行的通用解释型、交互式、面向对象的高级编程语言。
Python 是动态类型和垃圾回收编程语言。它由 Guido van Rossum 在 1985-1990 年期间创建。
JavaScript 是一种轻量级的解释型编程语言。它通常用于在 Web 应用程序中创建动态和交互式元素。
JavaScript 非常容易实现，因为它与 HTML 集成在一起。它是开放和跨平台的。
      </p>
   </div>
   <h4>
      float: left, right, clear: both
   </h4>
   <div class=" float-container float-container3">
      <img src="/css/images/tutimg.png" alt="qikepu" height=150 width=150 id="left" />
      <img src="/css/images/tutimg.png" alt="qikepu" height=150 width=150 id="right" />
      <p>
HTML代表超文本标记语言，HTML用于创建任何网页的内容和结构。
如果你把人体看作一个网页，qikepu.com，那么HTML就是身体的骨架。它是网页的构建块。
Python 是一种非常流行的通用解释型、交互式、面向对象的高级编程语言。
Python 是动态类型和垃圾回收编程语言。它由 Guido van Rossum 在 1985-1990 年期间创建。
JavaScript 是一种轻量级的解释型编程语言。它通常用于在 Web 应用程序中创建动态和交互式元素。
JavaScript 非常容易实现，因为它与 HTML 集成在一起。它是开放和跨平台的。
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
float	1.0	4.0	1.0	1.0	7.0

<< CSS - 清除修复（Clearfix ） CSS - 箭头 >>