前端清除浮动常用的四种方法

前言

清除浮动主要是为了解决,当父元素未设置高度,子元素使用了浮动(浮动元素会脱离标准流,不占位),引起的内部高度为0,从而影响后续父同级标准流盒子布局的问题。

演示代码如下:




    
    清除浮动



效果图

方法一:额外标签法

  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置clear:both;



    
    清除浮动



方法二:单伪元素清除法




    
    清除浮动



方法三:双伪元素清除法(推荐)




    
    清除浮动



此方法小米,淘宝的官网等目前都依然采用

方法四:给父元素添加overflow: hidden;




    
    清除浮动



最终效果

你可能感兴趣的:(前端清除浮动常用的四种方法)