浮动元素高度塌陷与布局 - web前端学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 浮动元素高度塌陷与布局

博主信息

博文 60

粉丝 5

访问量 81483

专题推荐

更多>

1.浮动元素的高度塌陷

一个元素，一旦浮动起来，就会脱离文档流，父容器就包不住它了，因此，也会产生一系列的问题，对整体页面布局是有影响的，当然也会有很多的解决方案，下面就举例演示来看看。

高度塌陷

先看看塌陷是一个什么样的效果，举例如下：

先写好代码，不设置浮动看看效果

<style>
    /* 给父容器设一个边框，显示效果更好 */
    .container {
      border: 3px solid red;
      width: 800px;
    }
    /* 给容器中的每个小盒子加上背景色且设置宽度，高度*/
    .container > div:first-of-type {
      background-color: blue;
      width: 200px;
      height: 200px;
    }
    .container > div:nth-of-type(2) {
      background-color: brown;
      width: 200px;
      height: 200px;
    }
    .container > div:last-of-type {
      background-color: chartreuse;
      width: 200px;
      height: 200px;
    }
  </style>
  <body>
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>

接着，在<style>标签中加入以下这段代码使所有元素浮动起来

.container > div {
      float: left;
    }

效果就会如下图：

这种情况就是高度塌陷，当容器中的元素浮动以后，就不再受到容器的包裹，因为元素已经脱离了文档流，此时，容器里面相当于没有元素了，所有就会如上图，只显示了一根边框线，当然也会有解决方案，如下：

解决方案一：给父容器也加个高度，和里面元素的高度一致。

这种方案不建议使用，因为当元素高度变化的时候，你还得去修改容器高度，不能达到自适应。

解决方案二：把父容器也浮动起来

虽然这样做，效果达到了，但是也不建议这样做，这样会产生传导效应，因为在实际开发中，一层一层的父级关系可能有很多，不是像这个案例一样，只有一个父级，当父级太多的话，每个都要去设浮动，这样太麻烦了，而且对布局也会有影响。

解决方案三：在子元素末尾添加一个空元素来清除浮动，必须是块级元素

这样做，效果也达到了，而且感觉还不错，没有改动CSS里面的任何东西，但是也不建议，因为它虽然没有改动CSS，但是改动了HTML的DOM结构，不利于后期数据获取

解决方案四：在容器末尾添加一个伪元素来清除浮动

这个方案相比上面三种方案，更为合适，即没有改动其他盒子的CSS样子，也没有对DOM结构产生影响，不过现在有了一种更为简单的方式，只需要一行代码即可

解决方案五：给父容器加上overflow:hidden;或者overflow:auto;属性即可

这个方案是目前最合适的方案，请记住overflow这个属性！

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

首先要知道三列布局是一个什么样子，如下：

结构知道了，然后就写下HTML，代码如下：

 <body>
    <div class="header">头部</div>
    <div class="main">
      <div class="content">内容区</div>
      <div class="aside">左边栏</div>
      <div class="aside">右边栏</div>
    </div>
    <div class="footer">底部</div>
  </body>

增加CSS，具体步骤请看注释内容：

    /*页面初始化 */
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 设置头部和底部的高度，背景色 */
    .header,
    .footer {
      height: 50px;
      background-color: cyan;
    }
    /* 设置侧边栏固定宽度，最小高度，背景色 */
    .main > .aside {
      width: 200px;
      min-height: 500px;
      background-color: rgb(60, 233, 60);
    }
    /*设置主体内容区最小高度，背景色，宽度自适应 */
    .main > .content {
      min-height: 500px;
      width: 100%;
      background-color: rgb(231, 86, 231);
    }
    /*
    设置中间主体区父容器的上下外边距，保证一点间隙
    设置内边距使内容收缩，预留出放侧边栏的位置，间距比侧边栏大10px就行，留一点间隙
    设置父容器最小宽度，避免后期因为缩小浏览器造成页面结构变化
    设置父容器overflow属性，避免浮动造成的影响
    */
    .main {
      margin: 10px auto;
      padding: 0 210px;
      min-width: 500px;
      overflow: hidden;
    }
    /* 设置容器中的所有元素浮动起来 */
    .main > * {
      float: left;
    }
    /* 使左侧边栏偏移到父容器左上角，然后设置定位方式，使其偏移到左边预留位置 */
    .main > div:nth-child(2) {
      margin-left: -100%;
      position: relative;
      left: -210px;
    }
    /* 使右侧边栏偏移到父容器右上角，然后设置定位方式，使其偏移到右边预留位置 */
    .main > div:nth-child(3) {
      margin-left: -200px;
      position: relative;
      left: 210px;
    }
  </style>

就这样，一个三列布局就制作出来了。

3. 总结：

在设计这个布局的时候，常常会遇到一些细节上面的问题，当我第一次完成这个布局的时候，效果呈现出来的和老师的是一样的，当我缩小浏览器的时候发现，结构发生了变化，侧边栏居然掉下去了，所以就会去找找原因，既然中间内容区可以自适应，那么我也可以给这个父容器加一个最小宽度，以保证在缩小浏览器的时候不会使页面结构发生变化，所以，我觉得这个工作确实是需要很多的耐心，细心去处理，代码也需要一点一点去调试，同时要理解这些元素的根本，比如：他们之间的上下级关系，一些比较重要的属性到底是什么含义，要运用到实际处，不能说这个标签我认识了，我就会了，这是不行的！

批改老师：