当前位置：首页 > news >正文

CSS3学习教程，从入门到精通，CSS3 浮动与清除浮动语法知识点及案例代码（14）

news 来源：原创 2025/5/24 1:09:38

CSS3 浮动与清除浮动语法知识点及案例代码

一、浮动基础

浮动语法

选择器 {
  float: left|right|none|initial|inherit;
}

left：元素向左浮动。
right：元素向右浮动。
none：默认值，元素不浮动。
initial：使用默认值。
inherit：继承父元素的浮动属性。

浮动特点

浮动元素会脱离文档流。
浮动元素会尽可能地向左或向右移动，直到遇到包含框的边缘或其他浮动元素。
块级元素浮动后可以设置宽度和高度。
浮动元素后的文本会环绕在浮动元素周围。

二、清除浮动

清除浮动语法

选择器 {
  clear: none|left|right|both|initial|inherit;
}

none：默认值，允许两侧有浮动元素。
left：不允许左侧有浮动元素。
right：不允许右侧有浮动元素。
both：不允许两侧有浮动元素。
initial：使用默认值。
inherit：继承父元素的清除属性。

清除浮动方法

使用 clear 属性
```
.clear {
  clear: both;
}
```
使用 overflow 属性
```
.parent {
  overflow: hidden;
}
```

使用 clearfix 技巧

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

三、案例代码

案例一：简单的浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动布局</title>
  <style>
    .container {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: #f99;
    }
    .right {
      float: right;
      width: 200px;
      height: 200px;
      background-color: #9f9;
    }
    .content {
      margin: 0 210px;
      height: 200px;
      background-color: #99f;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左侧浮动</div>
    <div class="right">右侧浮动</div>
    <div class="content">中间内容</div>
    <div class="clear"></div>
  </div>
</body>
</html>

注释：

.container：设置容器宽度和边框。
.left：向左浮动，设置宽度、高度和背景色。
.right：向右浮动，设置宽度、高度和背景色。
.content：设置中间内容的宽度、高度和背景色。
.clear：清除浮动。

案例二：清除浮动的多种方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
  <style>
    .parent {
      border: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .child {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f99;
    }
    /* 方法一：使用 clear 属性 */
    .clear {
      clear: both;
      height: 0;
      font-size: 0;
      line-height: 0;
    }
    /* 方法二：使用 overflow 属性 */
    .parent.overflow {
      overflow: hidden;
    }
    /* 方法三：使用 clearfix 技巧 */
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <h2>方法一：使用 clear 属性</h2>
  <div class="parent">
    <div class="child"></div>
    <div class="clear"></div>
  </div>

  <h2>方法二：使用 overflow 属性</h2>
  <div class="parent overflow">
    <div class="child"></div>
  </div>

  <h2>方法三：使用 clearfix 技巧</h2>
  <div class="parent clearfix">
    <div class="child"></div>
  </div>
</body>
</html>

注释：

.parent：设置父容器的边框和底部外边距。
.child：向左浮动，设置宽度、高度和背景色。
.clear：使用 clear 属性清除浮动。
.parent.overflow：使用 overflow 属性清除浮动。
.clearfix::after：使用 clearfix 技巧清除浮动。

以下是开发中常用的实际具体案例，帮助你更好地理解和应用 CSS3 浮动与清除浮动：

案例三：导航栏布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航栏布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .nav {
      width: 100%;
      height: 60px;
      background-color: #333;
    }
    .logo {
      float: left;
      width: 200px;
      height: 60px;
      background-color: #444;
      line-height: 60px;
      text-align: center;
      color: white;
    }
    .menu {
      float: left;
    }
    .menu-item {
      float: left;
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: white;
      list-style: none;
    }
    .user {
      float: right;
      width: 150px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: white;
    }
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="nav clearfix">
    <div class="logo">LOGO</div>
    <ul class="menu">
      <li class="menu-item">首页</li>
      <li class="menu-item">产品</li>
      <li class="menu-item">服务</li>
      <li class="menu-item">关于我们</li>
    </ul>
    <div class="user">登录/注册</div>
  </div>
</body>
</html>

注释：

*：重置所有元素的外边距和内边距，并设置盒模型为 border-box。
.nav：设置导航栏的宽度、高度和背景色。
.logo：向左浮动，设置宽度、高度、背景色、行高和文本对齐方式。
.menu：向左浮动，包含菜单项。
.menu-item：向左浮动，设置宽度、高度、行高、文本对齐方式、颜色和列表样式。
.user：向右浮动，设置宽度、高度、行高、文本对齐方式和颜色。
.clearfix::after：使用 clearfix 技巧清除浮动，确保导航栏的高度正常。

案例四：产品列表展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品列表展示</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 1000px;
      margin: 0 auto;
    }
    .product-list {
      overflow: hidden; /* 清除浮动 */
    }
    .product-item {
      float: left;
      width: 230px;
      height: 300px;
      margin: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
    }
    .product-img {
      width: 100%;
      height: 200px;
      background-color: #eee;
      margin-bottom: 10px;
    }
    .product-name {
      font-size: 16px;
      margin-bottom: 5px;
    }
    .product-price {
      color: #ff6000;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="product-list">
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称1</div>
        <div class="product-price">¥199</div>
      </div>
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称2</div>
        <div class="product-price">¥299</div>
      </div>
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称3</div>
        <div class="product-price">¥399</div>
      </div>
      <div class="product-item">
        <div class="product-img"></div>
        <div class="product-name">产品名称4</div>
        <div class="product-price">¥499</div>
      </div>
    </div>
  </div>
</body>
</html>

注释：

.container：设置容器的宽度和居中。
.product-list：设置产品列表的清除浮动方式为 overflow: hidden。
.product-item：向左浮动，设置宽度、高度、外边距、背景色、边框、圆角和内边距。
.product-img：设置产品图片的宽度、高度、背景色和外边距。
.product-name：设置产品名称的字体大小和外边距。
.product-price：设置产品价格的颜色和字体粗细。

案例五：文字环绕图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字环绕图片</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .image-wrapper {
      float: left;
      width: 200px;
      margin-right: 20px;
    }
    .image {
      width: 100%;
      height: 150px;
      background-color: #eee;
    }
    .text {
      font-size: 14px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image-wrapper">
      <div class="image"></div>
    </div>
    <div class="text">
      <p>这里是环绕图片的文字内容，图片向左浮动，文字环绕在图片右侧显示。通过浮动实现文字环绕图片的效果，使页面布局更加美观和灵活。</p>
      <p>浮动的图片脱离了文档流，但文字会自动环绕在图片周围，形成自然的排版效果。在实际开发中，这种布局常用于文章、新闻等内容的展示，提升用户体验。</p>
    </div>
  </div>
</body>
</html>

注释：

.container：设置容器的宽度、居中和内边距。
.image-wrapper：向左浮动，设置宽度和右侧外边距。
.image：设置图片的宽度、高度和背景色。
.text：设置文字的字体大小和行高。

案例六：表单布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .label {
      float: left;
      width: 100px;
      text-align: right;
      margin-right: 10px;
      line-height: 30px;
    }
    .input-wrapper {
      margin-left: 110px;
    }
    .input {
      width: 100%;
      height: 30px;
      padding: 0 5px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-group clearfix">
      <label class="label">用户名：</label>
      <div class="input-wrapper">
        <input type="text" class="input">
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="label">密码：</label>
      <div class="input-wrapper">
        <input type="password" class="input">
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="label">邮箱：</label>
      <div class="input-wrapper">
        <input type="email" class="input">
      </div>
    </div>
  </div>
</body>
</html>