设置浮动后高度坍塌的解决办法：

设置浮动后高度坍塌的解决办法：

1. 设置父元素固定高度：不灵活，使用场景较单一，一般用于像导航栏这样后期不会改变页面高度的模块。不推荐

2. 内墙法：在浮动元素的后面加一个空的块级元素，没有字和其他内容。只需要设置 clear：both;属性。clear 属性字面意思就是清除，both表示清楚浮动元素对我左右两边的影响。好处就是，父元素依然可以动态解决计算高度，并且包含浮动元素的高度，但是坏处就是多了一个div来清除浮动。这样会导致页面结构沉余。 不推荐使用

3. 伪元素清楚浮动：伪元素，就是不会出现页面结构中，但是同样会让墙内法生效的一种解决方法

      clear-fix::affter{
    
    
      content:"xxxafa";
      display:block;
      clear:both;
      overflow:hidden;
      height:0;
         }

content:"xx"; .clear-fix类型选择器对应标签 的内部，最后一行添加一个内容，默认行内样式 （inline）。
display:block;默认的content属于inline样式。无法满足内墙法的要求。所需要把该伪元素设置为块级元素。
clear:both;清楚浮动的方法，必须要写
overflow:hidden;height:0;因为我们不需要让元素本身显示出来，只想利用该元素设置clear:both；来清除浮动，所以，height设置为0，
overflow设置hidden。