当前位置:Gxlcms > html代码 > 浅谈CSS清除浮动的6种方法_html/css_WEB-ITnose

浅谈CSS清除浮动的6种方法_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:5人阅读

  • 额外标签法

  • 使用:after 伪元素

  • 给父元素定高

  • 利用overflow:hidden;属性

  • 父元素浮动

  • 父元素处于绝对定位

  • 在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题

    引出问题:

                    

    可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们,此刻只剩一条由上写边框贴合组成的线,同时 footer DIV元素也跑到了三个浮动元素的底下

    解决办法:

    1.使用额外标签发

                    

    这是早期普遍使用的方法,但是对于有代码洁癖的人来说,解决的不够完美

    2.使用:after 为元素

                    

    3.给父元素定高

                    

    4.利用 overflow:hidden 属性

                    

    5.父元素浮动

    当父元素浮动的时候,无需为子元素的浮动清除浮动,布局时经常用到

                    

    可以看出虽然 outer DIV 消除了塌陷现象,但由于其也发生了浮动故,其后元素若无处于正常文档流,会被跌在底下。
    如果要解决可以参考前面的办法。

    例如:

                    

    6.父元素处于绝对定位

                    


    与上一个方法同理,由于绝对定位已脱离正常文档流,故出现相同情况,解决办法依旧可以使用以上办法结合,灵活多变。

    人气教程排行