高度塌陷？怎么解决

1、什么是高度塌陷？

　　给子元素设置浮动，导致父元素高度为零或者高度自适应

2、怎么解决高度塌陷？

　　清楚浮动（清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题）

3、清除浮动的解决方式？

方法一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签并添加clear:both属性。

　　优点： 通俗易懂，书写方便。（不推荐使用）
　　缺点： 添加许多无意义的标签，结构化比较差。

<style>
　　.son{
　　　　width:100px;
　　　　height:200px
　　　　float:left
　　}
　　.clear{
　　　　clear:both
　　}
</style>

<div class="parent">
   <div class="son"><div>
　　<div class="clear"></div>//给元素son清除浮动（在son后添加一个空白标签clear(类名可以随意），设置clear:both;即可）
</div>

方法二、给父元素添加 overflow:hidden

父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

　　缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

　　注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

方法三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

　　优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

　　缺点： 由于IE6-7不支持：after，使用zoom：1

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";
   display: block;
　　height: 0;
   clear:both;
   visibility: hidden;
}
.clearfix{
   *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
 
<div class="parent clearfix">
     <div class="son1">son1</div>
     <div class="son2">son2</div>
     <!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>

方法四、使用before和after双伪元素清除浮动：（较常用推荐）

.parent{
　　border: 1px solid black;
   *zoom: 1;
}
.clearfix:after,.clearfix:before{
   content: "";
   display: block;
   clear: both;
}
.son1,.son2{
   width: 200px;
   height: 200px;
   float: left;
 }
.son1{
  background-color: red;
}
.son2{
  background-color: blue;
}
       
<div class="parentclearfix">
　　<div class="son1">son1</div>
　　<div class="son2">son2</div>
</div>
<div class="footer"></div>

　　

原文链接：https://blog.csdn.net/weixin_43638968/article/details/107617275

标签：浮动,元素,清除,clear,after,高度,zoom,塌陷,解决
来源： https://www.cnblogs.com/mydiary/p/16120787.html