浮动产生的高度塌陷问题

浮动产生的高度塌陷问题

• 高度塌陷产生的原因
  因为浮动后脱离文档流，所以如果一个父元素中所有的子元素都浮动，则相当于这个父元素中没有写东西，父元素高度就会变成 0，从而导致下方的布局错乱，这个问题叫高度塌陷

解决高度塌陷的问题

增加空标签

增加空标签会导致html结构发生变化

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="clear"></div>
</div>
}

.clear {
  height: 0;
  clear: both;
}

最佳方法 清除浮动

.clearfix::after {
   content: "";
   // 因为伪类元素是行内元素
   display: block;
   height: 0;
   /*设置元素不可见 */
   visibility: hidden;
      /*核心属性 清除左右两边的浮动 */
      clear: both;
}

<div class="box clearfix">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

定高法

适合元素数量不在增加或者不会换行的情况 直接强行给父元素添加高度，解决高度塌陷问题

浮动法

这个方法不适合去解决问题，只适合刚好遇到对应情况时使用。

如果父元素也浮动，则不会产生高度塌陷的问题。如果在布局时，刚好父元素也浮动，那我们就可以不添加clearfix

overflow

这个属性很方便，但是不要用
直接给父元素添加overflow: hidden;