一.浮动元素高度塌陷产生的原因与解决方案（伪元素与overflow)

浮动基本特征：

浮动元素都是块级元素
浮动元素会脱离原来在文档流中的位置，后面的元素自动填充它让出来的位置
对前面的元素没有影响
行内元素，设置不了高宽大小，不能充当容器或父级，所以要把行内元素转变成块级元素才能浮动
还可以清除浮动元素影响
浮动元素水平移动，没有办法贴到边框上

浮动元素的高度与塌陷：

将三个元素同时全部浮动，父元素包不住了，怎么办？
a. 得去调父级，但是不能自适应
b. 一级一级去调试，最终影响到html整个布局
c. 添加一个专用元素来清除浮动
d. 添加伪元素
e. 用BFC块级格式化上下文，此方法比较简单，推荐使用
用BFC块级(overflow: auto/overflow: hidden)实现三个元素同时浮动，图片如下：

代码如下：

<!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 {
      border: 3px dashed deepskyblue;
    }
    .item {
      width: 100px;
      height: 100px;
    }
    .item:first-of-type {
      background-color: firebrick;
    }
    .item:nth-last-of-type(2) {
      background-color: fuchsia;
    }
    .item:last-of-type {
      background-color: gold;
    }
    .item {
      float: left;
    }
    .container {
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

二.使用定位与浮动完成一个三列经典布局

1.使用定位完成一个三列经典布局

使用绝对定位来完成一个通用三列布局，主体用定位做的，要转为定位元素，成为父级。如下图：

代码如下：

<!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;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
      color: #666;
    }
    /* 页眉与页脚 */
    .header,
    .footer {
      height: 40px;
      background-color: lightsteelblue;
    }
    .content {
      width: 960px;
      margin: auto;
      /* background-color: #ccc; */
    }
    .content ul li {
      float: left;
      line-height: 40px;
      padding: 0 15px;
    }
    .content ul li:hover {
      background-color: limegreen;
    }
    /* 页脚 */
    .content p {
      text-align: center;
      line-height: 40px;
    }
    /* 主体用定位来做 */
    .container {
      width: 960px;
      margin: 10px auto;
      /* background-color: seashell; */
      min-height: 600px;
      /* 定位做的，转为定位元素，父级 */
      position: relative;
    }
    .container > .left {
      width: 200px;
      background-color: navajowhite;
      min-height: 600px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .container > .right {
      width: 200px;
      background-color: navajowhite;
      min-height: 600px;
      position: absolute;
      top: 0;
      right: 0;
    }
    .container > .main {
      background-color: plum;
      min-height: 600px;
      width: 540px;
      position: absolute;
      top: 0;
      left: 210px;
    }
  </style>
</head>
<body>
  <!-- 页眉 -->
  <div class="header">
    <div class="content">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">会场</a></li>
        <li><a href="">售后</a></li>
      </ul>
    </div>
  </div>
  <!-- 主体 -->
  <div class="container">
    <div class="left">左</div>
    <div class="main">中</div>
    <div class="right">右</div>
  </div>
  <!-- 页脚 -->
  <div class="footer">
    <div class="content">
      <p>教育科技有限公司&copy; | 备案号：*******</p>
    </div>
  </div>
</body>
</html>

2.使用浮动完成一个三列经典布局，与上面1的图片一样的布局，防止浮动元素塌陷用overflow: hidden，代码如下：

<!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;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
      color: #666;
    }
    /* 页眉与页脚 */
    .header,
    .footer {
      height: 40px;
      background-color: lightsteelblue;
    }
    .content {
      width: 960px;
      margin: auto;
      /* background-color: #ccc; */
    }
    .content ul li {
      float: left;
      line-height: 40px;
      padding: 0 15px;
    }
    .content ul li:hover {
      background-color: limegreen;
    }
    /* 页脚 */
    .content p {
      text-align: center;
      line-height: 40px;
    }
    /* 主体用定位来做 */
    .container {
      width: 960px;
      margin: 10px auto;
      /* background-color: seashell; */
      min-height: 600px;
      /* 防止浮动元素塌陷 */
      overflow: hidden;
    }
    .container > .left {
      width: 200px;
      background-color: navajowhite;
      min-height: 600px;
      float: left;
    }
    .container > .right {
      width: 200px;
      background-color: navajowhite;
      min-height: 600px;
      float: right;
    }
    .container > .main {
      background-color: plum;
      min-height: 600px;
      width: 540px;
      float: left;
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <!-- 页眉 -->
  <div class="header">
    <div class="content">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">会场</a></li>
        <li><a href="">售后</a></li>
      </ul>
    </div>
  </div>
  <!-- 主体 -->
  <div class="container">
    <div class="left">左</div>
    <div class="main">中</div>
    <div class="right">右</div>
  </div>
  <!-- 页脚 -->
  <div class="footer">
    <div class="content">
      <p>教育科技有限公司&copy; | 备案号：*******</p>
    </div>
  </div>
</body>
</html>

批改老师：

WJ

批改状态：合格

老师批语：总体看上去写的很认真仔细！

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

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

0条评论

作者最新博文

vscode、phpstudy、浏览器、markdown、服务器、web开发术语-前端12期第一课6.10

2020-06-11 13:17:30