浮动布局实战：网易云列表、淘宝 Banner 与文字环绕详解 | 极客日志

HTML / CSS大前端

浮动布局实战：网易云列表、淘宝 Banner 与文字环绕详解

浮动布局虽非现代首选，但理解其原理对维护旧项目至关重要。本文通过四个经典案例演示浮动在实际场景中的应用：计算等宽网格布局（如商品列表）、利用 overflow 隐藏实现等高布局（如 Banner 区）、构建带交互的横向导航菜单，以及实现图文混排的文字环绕效果。重点讲解宽度计算公式、清除浮动技巧及 hover 状态处理，帮助开发者掌握底层布局逻辑。

赛博朋克发布于 2025/2/50 浏览

浮动布局实战：网易云列表、淘宝 Banner 与文字环绕详解

前言

了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了。虽然 Flex 和 Grid 是现代主流，但理解浮动原理对维护旧项目依然至关重要。

这篇主要分享 4 个浮动布局的实例。为了让你更容易理解，我们这次只关注大体布局逻辑，暂不深入内部填充细节。

一、等宽布局（网易云音乐列表）

这种布局常见于商品列表，比如 3 列、4 列或 5 列排布。核心在于计算每个子元素的宽度。

浮动布局示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 父容器样式 */
      .parent-box {
        width: 1200px; /* 设置父容器宽度为 1200 像素 */
        margin: 20px auto; /* 设置父容器上下边距为 20px，左右自动居中 */
      }

      /* 子元素样式 */
      .parent-box div {
        width: 288.75px; 
        :  ;
        : border-box; 
        : ; 
        :    ; 
        : ; 
        : left; 
        : ; 
        : center; 
        : ; 
        : ; 
      }

      
       (n) {
        : ; 
      }

      
       {
        : ;
        : table;
        : both;
      }
    
  
  
    
      div 1
      div 2
      div 3
      div 4
      div 1
      div 2
      div 3
      div 4
      div 1
      div 2
      div 3
      div 4
      div 1
      div 2
      div 3
      div 4
      div 1
      div 2
      div 3
      div 4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 统一盒模型 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为 100% */
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      
      .wrapper {
        width: 1000px;
        margin: 20px auto;
        background-color: #fff;
        height: 421px;
        overflow: hidden; /* 关键：触发 BFC 包裹浮动 */
      }

      /* 左侧导航栏样式 */
      .left {
        float: left; /* 左浮动 */
        width: 25%;
        background-color: #f0f0f0;
      }

      /* 右侧侧边栏样式 */
      .right {
        float: right; /* 右浮动 */
        width: 25%;
      }

      /* 中间内容区域样式 */
      .middle {
        width: 500px;
        float: left; /* 左浮动 */
        padding: 33px 10px 10px 10px;
      }
    </style>
  </head>

  <body>
    <div class="wrapper clearfix">
      <div class="left">
        <img src="img/taobao-img1.png" alt="" />
      </div>
      <div class="middle">
        <img src="img/taobao-img2.png" alt="" />
      </div>
      <div class="right">
        <img src="img/taobao-img3.png" alt="" />
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 统一盒模型 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项默认样式 */
      }
      img {
        display: block;
        width: 100%;
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      
      .nav {
        background-color: #242424;
        border-bottom: 5px solid #c20c0c;
      }

      .nav li {
        float: left;
        background: #242424;
      }
      .nav li a {
        display: block;
        padding: 0px 20px;
        line-height: 70px;
        color: #cccccc;
        font-size: 14px;
      }
      .nav li.current a {
        color: #fff; /* 当前选中项的文字颜色 */
        background: #000 url(img/icon-top-arrow.png) no-repeat bottom -1px center; /* 背景图片上三角 */
      }
      .nav li:hover a {
        color: #fff;
        background-color: #000;
        transition: all 0.5s ease-in; /* CSS3 过渡效果 */
      }
    </style>
  </head>
  <body>
    <div class="nav clearfix">
      <li class="current"><a href="#">发现音乐</a></li>
      <li><a href="#">我的音乐</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">商城</a></li>
      <li><a href="#">音乐人</a></li>
      <li><a href="#">云推歌</a></li>
      <li><a href="#">下载客户端</a></li>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Floating Text around Image</title>
    <style>
      .container {
        width: 600px;
        margin: 10px auto;
      }
      .image {
        float: left; /* 让图片左浮动，文字不用任何设置 */
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="img/header1.png" alt="Image" class="image" />
      <p>周杰伦（Jay Chou），1979 年 1 月 18 日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000 年，发行个人首张音乐专辑《Jay》。2001 年，凭借专辑《范特西》奠定其融合中西方音乐的风格。2002 年，举行'The One'世界巡回演唱会。2003 年，成为美国《时代》杂志封面人物；同年，发行音乐专辑《叶惠美》，该专辑获得第 15 届台湾金曲奖最佳流行音乐演唱专辑奖。2004 年，发行音乐专辑《七里香》，该专辑在亚洲的首月销量达到 300 万张；同年，获得世界音乐大奖中国区最畅销艺人奖。2005 年，主演个人首部电影《头文字 D》，并凭借该片获得第 25 届香港电影金像奖和第 42 届台湾电影金马奖的最佳新演员奖。2006 年起，连续三年获得世界音乐大奖中国区最畅销艺人奖。</p>
    </div>
  </body>
</html>