清除浮动的原因:当我们没有给父元素添加高度时,将里面子元素添加浮动(如:float:left),这样无法撑大父盒子,造成布局混乱。
清除浮动要注意,要给浮动元素的父元素清除浮动,用clear:both语句;旧时我们经常给父元素添加一个带有clear:both的块级子元素,这种方法给多个盒子清除浮动时,会创造出大量无用块级元素,增加服务器压力,而使用after伪元素添加子元素(转化成块级元素)清除浮动,创造的子元素并不会显示在html树中,有效解决这一问题,并且更加便捷。
没有清除浮动前:
清除浮动: