首页 > 博客列表 > 了解浮动和其网页布局

博主信息

博文 11

粉丝 0

访问量 17523

专题推荐

更多>

了解浮动

什么是浮动

CSS 的 Float（浮动）是一种使元素脱离文档流的方法，会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动的表现

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

<body>
  <style>
    /* 设置外面盒子的大小 */
    .box {
      width: 100%;
      height: 400px;
      border: 2px dashed red;
    }
    /* 设置小盒子的共同样式 */
    .item {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    /* 每个item的背景 */
    .box > :first-child {
      background-color: #00ff00;
    }
    .box > :last-child {
      background-color: #ff0000;
    }
    .box > :nth-child(2) {
      background-color: #0000ff;
    }
  </style>
  <div class="box">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
  </div>
</body>

<body>
  <style>
    /* 设置外面盒子的大小 */
    .box {
      width: 100%;
      height: 400px;
      border: 2px dashed red;
    }
    /* 设置小盒子的共同样式 */
    .item {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    /* 每个item的背景 */
    .box > :first-child {
      background-color: #00ff00;
    }
    .box > :last-child {
      background-color: #ff0000;
    }
    .box > :nth-child(2) {
      background-color: #0000ff;
    }
    /*  向左浮动 */
    .item {
      float: left;
    }
  </style>

<style>
  /* 设置外面盒子的大小 */
  .box {
    width: 100%;
    height: 400px;
    border: 2px dashed red;
  }
  /* 设置小盒子的共同样式 */
  .item {
    width: 200px;
    height: 200px;
    border: 1px solid black;
  }
  /* 每个item的背景 */
  .box > :first-child {
    background-color: #00ff00;
  }
  .box > :last-child {
    background-color: #ff0000;
  }
  .box > :nth-child(2) {
    background-color: #0000ff;
  }
  /* 向右浮动 */
  .item {
    float: right;
  }
</style>

如果父级元素的宽度无法容纳水平排列的三个浮动块，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动对布局的影响

浮动的元素会脱离文档流，正是因为这种特性，导致本属于普通流中的元素浮动之后，包含框中由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）

<body>
  <style>
    /* 设置外面盒子的大小 */
    .box {
      width: 500px;
      border: 2px dashed red;
    }
    /* 设置小盒子的共同样式 */
    .item {
      height: 200px;
      width: 200px;
      border: 1px solid black;
      /* 设置浮动 */
      float: left;
    }
    /* 每个item的背景 */
    .box > :first-child {
      background-color: #00ff00;
    }
    .box > :last-child {
      background-color: #ff0000;
    }
    .box > :nth-child(2) {
      background-color: #0000ff;
    }
    /* 向右浮动 */
  </style>
  <div class="box">
    <div class="item">box1</div>
    <div class="item">box2</div>
    <div class="item">box3</div>
  </div>
</body>

清除浮动

在实际布局中，往往这并不是我们所希望的，所以需要清除浮动，使其包含框表现出正常的高度。

使用空标签清除浮动

<div>  
  <div style="float:left;">item</div>  
  <div style="float:left;">item</div>  
  <div style="clear:both;"></div>  
</div>

优点：通俗易懂，容易掌握

缺点：增加了空标签，改变了DOM结构，对js的DOM操作有影响

父级元素浮动

<body>
  <style>
    body > div {
      width: 400px;
      border: 1px dashed red;
      /*父级添加浮动*/
      float: left;
    }
    div > div {
      width: 50px;
      height: 50px;
      background-color: green;
      border: 1px solid black;
    }
  </style>
  <div>
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <div style="float: left;"></div>
  </div>
</body>

优点：不存在结构和语义化问题，代码量极少。

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body。

::after伪元素

<body>
  <style>
    body > div {
      width: 400px;
      border: 1px dashed red;
    }
    div > div {
      width: 50px;
      height: 50px;
      background-color: green;
      border: 1px solid black;
    }
    /*使用::after伪元素*/
    body > div:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
  <div>
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <div class="clear" style="float: left;"></div>
  </div>
</body>

优点：结构和语义化完全正确，代码量居中。
缺点：复用方式不当会造成代码量增加。

父级元素定义overflow:hidden(建议使用)

<body>
  <style>
    body > div {
      width: 400px;
      border: 1px dashed red;
      /* 使用overflow 属性*/
      overflow: hidden;
    }
    div > div {
      width: 50px;
      height: 50px;
      background-color: green;
      border: 1px solid black;
    }
  </style>
  <div>
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <div style="float: left;"></div>
  </div>
</body>

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

浮动和定位实现的三列布局

浮动：

<!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;
        box-sizing: border-box;
      }
      /* 页眉页脚 */
      header,
      footer {
        height: 80px;
        background-color: lightblue;
      }
      /* 主体 */
      main {
        width: 960px;
        min-height: 600px;
        height: 700px;
        margin: auto;
        background-color: #cccccc;
        /* 清除浮动 */
        clear: both;
      }
      /* 左侧 */
      .left {
        width: 200px;
        min-height: 600px;
        height: 100%;
        background-color: blue;
        /* 浮动 */
        float: left;
      }
      /* 右侧 */
      .right {
        width: 200px;
        min-height: 600px;
        height: 100%;
        background-color: blue;
        /* 浮动 */
        float: right;
      }
      /* 内容 */
      article {
        min-height: 600px;
        height: 100%;
        width: 560px;
        background-color: green;
        /* 浮动 */
        float: left;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <main>
      <aside class="left">左侧</aside>
      <article>内容</article>
      <aside class="right">右侧</aside>
    </main>
    <footer>页脚</footer>
  </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;
        box-sizing: border-box;
      }
      /* 页眉页脚 */
      header,
      footer {
        height: 80px;
        background-color: lightblue;
      }
      /* 主体 */
      main {
        width: 960px;
        min-height: 600px;
        height: 700px;
        margin: auto;
        background-color: #cccccc;
        position: relative;
      }
      /* 左侧 */
      .left {
        width: 200px;
        min-height: 600px;
        height: 100%;
        background-color: blue;
        /* 定位 */
        position: absolute;
        top: 0;
        left: 0;
      }
      /* 右侧 */
      .right {
        width: 200px;
        min-height: 600px;
        height: 100%;
        background-color: blue;
        /* 定位 */
        position: absolute;
        top: 0;
        right: 0;
      }
      /* 内容 */
      article {
        min-height: 600px;
        height: 100%;
        width: 560px;
        background-color: green;
        /* 定位 */
        position: absolute;
        top: 0;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <main>
      <aside class="left">左侧</aside>
      <article>内容</article>
      <aside class="right">右侧</aside>
    </main>
    <footer>页脚</footer>
  </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>
  </head>
  <style>
    /* 初始化 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 页眉页脚 */
    header,
    footer {
      height: 80px;
      background-color: lightblue;
    }
    /* 主体 */
    main {
      width: 100%;
      min-height: 600px;
      height: 700px;
      margin: auto;
      background-color: #cccccc;
      /* 内边距 */
      padding: 0 300px;
      /* 清除浮动 */
      clear: both;
    }
    /* 边栏公共样式 */
    aside {
      width: 200px;
      height: 100%;
      background-color: blue;
    }
    /* 内容区样式 */
    article {
      width: 100%;
      height: 100%;
      background-color: lightgreen;
    }
    /* 主体元素浮动 */
    main > * {
      float: left;
    }
    /* 左边栏 */
    .left {
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    /* 右边栏 */
    .right {
      margin-left: -200px;
      position: relative;
      left: 200px;
    }
  </style>
  <body>
    <header>页眉</header>
    <main>
      <article>内容</article>
      <aside class="left">左侧</aside>
      <aside class="right">右侧</aside>
    </main>
    <footer>页脚</footer>
  </body>
</html>

批改老师：

WJ

批改状态：合格

老师批语：总体来说写的不错！继续加油！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Apache多站点目录无权限

2020-06-12 11:20:19