CSS-浮动

CSS浮动属性控制页面上内容的定位和格式。它可用于将文本包裹在图像周围，或将任何内联元素包裹在定义的 HTML 元素周围，包括列表、段落、div、span、表格、iframe 和块引用。

CSS 为float属性提供了以下可能的值来控制网页上元素的流动。

none：元素不浮动。这是默认值。
left：元素浮动到其容器的左侧。
right：元素浮动到其容器的右侧。
继承：元素继承其父元素的浮点值。
初始：元素浮动到其默认值。

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

CSS 浮动 - 演示

尝试为 CSS float属性选择不同的值，并在右侧框中查看结果。

CSS 浮动示例

以下示例演示了 float 属性及其值的用法：

<html>
<head>
<style>
   div {
      padding: 10px;
      width: 150px;
      height: 150px;
   }
   .left {
      float: left;
      background: yellow;
   }
   .right {
      float: right;
      background: cyan;
   }
</style>
</head>
<body>
   <div class="left">Left Floating Text</div>
   <div class="right">Right Floating Text</div>
</body>
</html>

CSS Float - 三列布局

我们可以使用float: right属性为网页创建三列布局。以下是创建三列布局的示例。您可以根据需要调整列的宽度。

例子

这是一个例子 -

<html>
<head>
<style>
   .grid-box {
      float: right;
      width: 33.333%;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
   }
   .grid-container::after {
      content: "";
      clear: both;
      display: table;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-box" style="background-color:#f0610e;">
         <p>This is red box</p>
      </div>
      <div class="grid-box" style="background-color:#86f00e;">
         <p>This is green box</p>
      </div>
      <div class="grid-box" style="background-color:#aaaaaa;">
         <p>This is green box</p>
      </div>
   </div>
</body>
</html>

CSS 浮动示例 - 图像彼此相邻

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

例子

这是一个例子 -

<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>Images Next To Each Other</h4>
   <div class="grid-container">
      <div class="grid-box">
         <img class="img" src="images/orange-flower.jpg" style="width:100%; height:50%"/>
         <p>Orange color flower</p>
      </div>
      <div class="grid-box">
         <img class="img" src="images/sea.jpg" style="width:100%; height:50%"/>
         <p>Sea View</p>
      </div>
      <div class="grid-box">
         <img class="img" src="images/tree.jpg" style="width:100%; height:50%"/>
         <p>Tree View</p>
      </div>
      <div class="grid-box">
         <img class="img" src="images/red-flower.jpg" style="width:100%; height:50%"/>
         <p>Red color flower</p>
      </div>
   </div>
</body>
</html>

CSS 浮动示例 - 灵活的盒子

要在柔性容器中创建两列布局，可以使用 display : flex属性使容器成为 Flex 容器，而flex-nowrap属性可确保即使视口宽度为 Flex 项目仍保留在单行中减少。

例子

这是一个例子。您可以通过更改其不同参数来尝试此示例 -

<html>
<head>
<style>
   .grid-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: #eeeeee;
   }
   .grid-box {
      width: 50%;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
      background-color: #40a944;
      margin: 15px;
   }
   .grid-container::after {
      content: "";
      clear: both;
      display: table;
   }
</style>
</head>
<body>
   <h4>Resize the browser window to see the effect.</h4>
   <div class="grid-container">
      <div class="grid-box">
         <p>Box One</p>
      </div>
      <div class="grid-box">
         <p>Box Two</p>
      </div>
   </div>
</body>
</html>

CSS 浮动示例 - 导航菜单

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

例子

这是一个例子。您可以通过更改其不同参数来尝试此示例 -

<html>
<head>
<style>
   ul {
      overflow: hidden;
      background-color: #eeeeee;
      list-style-type: none;
   }
   li {
      float: right;
   }
   li a {
      display: block;
      color: #000000;
      padding: 15px;
      text-decoration: none;
   }
   .active-link {
      background-color: #40a944;
   }
</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 浮动示例 - 段落

您可以在容器内浮动一个段落，容器中的其他元素将环绕该段落，这将为您的内容提供杂志和新纸张的外观。

例子

这是一个例子。您可以通过更改其不同参数来尝试此示例 -

<html>
<head>
<style>
   div {
      border: 2px solid #1b1b1b;
      padding: 5px;
      font-size: 18px;
   }
   span {
      float: right;
      width: 120px;
      margin: 0.5em;
      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  <span>Tutorialspoint <br>CSS Float</span> randomised words which 
      don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.  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. This will need little more effort to become expert 
      in Casecading Style Sheet.
      </div>
</body>
</html>

CSS 浮动示例 - 向左或向右浮动

可以将图像在 div 内向左和向右浮动，并在这些图像周围添加填充和边距，使它们具有杂志和新闻报纸的外观。

例子

这是一个例子。您可以通过更改其不同参数来尝试此示例 -

<html>
<head>
<style>
   div {
      border: 2px solid #1b1b1b;
      padding: 20px;
      margin: 10px;
  }
   .left {
      float: left;
      border: 3px solid #f0610e;
      width: 150px;
      height: 80px;
      margin: 5px;
   }
   .right {
      float: right;
      border: 3px solid #f0610e;
      width: 150px;
      height: 80px;
      margin: 5px;
   }
</style>
</head>
<body>
   <div>
      <p> <img class="left" src="images/orange-flower.jpg" />
      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.</p>

      <p> <img class="right" src="images/orange-flower.jpg" />
      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.</p>

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