CSS 浮动

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

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

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

我们无法将元素浮动到容器的中间、顶部或底部 – 只能进行左浮动或右浮动。

CSS浮动示例

下面的示例演示了浮动属性及其值的用法：

<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: 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-nowrap 属性确保弹性项目保持在一行中，即使视口宽度减小。

示例

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

<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示例 – 导航菜单

您可以使用 float 属性来创建一个带有超链接列表的水平菜单。菜单链接通过 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>