清除浮动（解决高度坍塌的问题）的方法5种

最新推荐文章于 2023-12-25 15:36:46 发布

the弄潮儿_

最新推荐文章于 2023-12-25 15:36:46 发布

阅读量1.4k

点赞数 5

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_52247852/article/details/110731308

版权

高度坍塌的根源

常规流盒子的自动高度，在计算时，不会考虑浮动盒子
如果父盒子没有给高度，但是里面的子元素浮动，或者绝对定位，固定定位，都会使这个子元素脱离文档流，使父元素不能够获取元素的高，也就是不能自适应子元素的高了，既然不能自适应子元素的高了，那么父元素的高就是0，那么后面的元素自然就跑上来了。

方法一：给浮动元素的父辈容器添加高度

缺点: 需要手动添加高度, 如何后面子元素的高度发生变化之后,还行再次修改父辈的高度, 给后期的维护带来麻烦.

优点: 简单粗暴直接有效

<style>
  *{
    padding:0;
    margin: 0;
  }

  .box1{
    width: 1700px;
    height: 100px;
    background-color: lightseagreen;
  }

  .box1>div{
    float: left;
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    border: lightgreen solid 2px;
  }

  .box2{
    width: 100px;
    height: 100px;
    background-color: red;
  }
  
</style>
<body>
  <div class="box1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="box2"></div>
</body>

这种方法很简单，就是浮动元素需要多少高度，就给它的父元素设置多少高度，虽然好使，但是不够灵活。

在这里插入图片描述

方法二：使用清除属性clear

清除浮动，涉及css属性：clear

默认值：none
left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
right:清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both:清楚左右浮动，该元素必须出现在前面所有浮动盒子的下方

clear属性的含义是避免前面的浮动元素对自己的影响. 所以, 谁不想让别人影响自己, 就添加到谁身上.

<style>
  .contianer{
    background-color: deepskyblue;
  }

  .item{
    float: left;
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    border: gold solid 1px;
  }

  .end{
     clear: both;  /*  处理高度坍塌的问题*/
  }
  </style>
<body>
<div class="contianer">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="end"></div>
</div>
</body>

在这里插入图片描述

这种方法的特点就是我们专门设置了一个空盒子来撑起父元素的高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

方法三：使用 after 伪元素清除浮动，给父元素添加 clearfix

给一个元素添加一个:after则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子.

该样式在clearfix，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。

 <style>
  .contianer{
    background-color: deepskyblue;
    padding: 30px;
  }
  .item{
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    border: gold solid 1px;
    float: left;
  }

  .clearfix::after{
    content: "";
    display: block;  /*插入伪元素是行内元素，要转化为块级元素*/
    clear: both;
  }

  .clearfix{
    *zoom:1;
  }              /*  *只有IE6,7识别 */
  
  </style>
<body>
<div class="contianer clearfix">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
</body>

在这里插入图片描述
原理：after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动思想，结构语义化正确。
父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别，要进行兼容，使用zoom:1触发hasLayout来清除浮动

方法四:给父级元素添加overflow：hidden，创建 bfc

<style>
  .box1{
    width: 200px;
    background-color: aqua;
    overflow: auto;  
    /* 这里的auto可以是除了visible之外的其他值 */
  }
  
  .box1>div{
    float: left;
    width: 50px;
    height: 50px;
    background-color: brown;
  }

  footer{
    width: 200px; 
    height: 100px;
    background-color: coral;
    clear: both;
  }

  .box2{
    width: 200px;
    height: 100px;
    background-color: chartreuse;
  }
</style>
<body>
  <div class="box1">
    <div></div>
    <div></div>
    <div></div>
    <footer></footer>
  </div>
  <div class="box2"></div>
</body>

仅仅只在父级元素上添加了一个值为auto的overflow属性，父元素的高度立即被撑起，将浮动元素包裹在内。看起来，浮动被清除，浮动不再会影响到后续元素的渲染（严格讲，这和清除浮动没有一点关系，因为不存在哪个元素的浮动被清除）。
其实，这里的overflow值，还可以是除了"visible"之外的任何有效值，它们都能达到撑起父元素高度，清除浮动的目的。
当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC
按照BFC的特点，BFC的高度是要包括浮动元素的，所以父元素的高度被撑起来，达到了清除浮动影响的目的。
在这里插入图片描述

方法五：使用 before 和 after 双伪元素清除浮动

<style>
  .box1{
    width: 300px;
    background: cyan;
  }

  .box1>div{
    width: 70px;
    height: 100px;
    background-color: yellow;
    float: left;
  }

  .clearfix{
    *zoom: 1;
  }

  .clearfix::before,.clearfix::after{
    content: '';
    display: block;
    clear: both;
  }  
</style>
<body>
<div class="box1 clearfix">
  <div></div>
  <div></div>
  <div></div>
</div>
</body>