清除浮动

清除浮动有两种方法：

一、设置 width:100%(或固定宽度) 和 overflow:hidden

.parent {
    border: 4px solid black;
    width: 200px;
    overflow: hidden;        /*这样可以清除浮动*/
  }

  .child {
    width: 200px;
    height: 200px;
    float: left;
    background-color: #8bc528;
  }
    
    

        

    

设置 overflow:hidden 可以清除浮动的原因:

正常父元素包含浮动子元素，父元素的高度确实为0。但是父元素overflow:hidden; 后，首先会计算 height: auto; 的真实高度，由于其触发了BFC，需要包含子元素，所以高度不是0，而是子元素高度。这时 overflow:hidden; 才起到隐藏作用，不过父元素高度足够大，所以子元素没有被隐藏。
CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？

二、使用 clear:both; 或 clear:left; 或 clear:right;

 .clearfix {
     display: inline-block;
   }
 .clearfix:after {
     content: '';
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   }

将上面的 .clearfix 样式应用到需要清除浮动的元素的父元素上。