給沒(méi)有浮動(dòng)的元素添加clear:both，就會(huì)清除元素兩邊的浮動(dòng)效果（沒(méi)有被該元素clear:both的清除的區(qū)域，依然會(huì)有浮動(dòng)效果），不浮動(dòng)的元素以前被浮動(dòng)覆蓋的區(qū)域就會(huì)脫離浮動(dòng)元素的·覆蓋，緊貼浮動(dòng)元素下方布局。父元素會(huì)被撐開(kāi)。

.clearfix::after{
          content: "";
          display: block;
          clear: both;
      }

給父元素（沒(méi)有設(shè)置高度）添加類clearfix ，父元素里面的浮動(dòng)效果就會(huì)被清除，此時(shí)父元素的高度就是浮動(dòng)元素的高度，如果父元素里有沒(méi)float的元素，則浮動(dòng)的元素依然會(huì)覆蓋不浮動(dòng)的元素，可以為不浮動(dòng)的元素添加clear:both