浮动总结及其清除方法

    每次编辑页面时候总会遇到浮动问题,当时的解决方法结束百度一个然后应用,但其实没有真正理解到底为什么。所以当再次使用float的时候又是状况百出,才意识到真的有必要去理清这个问题,这样才是真正的“一劳永逸”的方法。下面是自己根据他人的结论和自己的各种情况举例得到的总结:

    2.当全部第一代级子级浮动,父级无法撑开导致子级溢出情况:

        1).在父级结束之前添加一个带有clear:both属性的空元素--->padding不受影响

             缺点:margin失效,需要大量无意义HTML元素,后期维护不易

        2).直接父级使用overflow:hidden/auto清除浮动------>margin、padding不受影响

             注意:IE6会触发layout,则在父级元素内添加*zom:1;

        3).(推荐)使用:after伪元素----->实现元素末尾添加一块看不见的块元素以清除浮动

               注意:clear:both与content:value不能缺(content表示在该元素之后添加的内容(:before则是之前添加的内容));

                         结合IEhack,会触发layout,在父级元素内添加*zom:1。

        4).给其父级添加父级

             缺点:会导致整体浮动,影响布局

    3.当同级间出现一个浮动----->父级不受影响;而下一个相邻同级受影响:

        1).对下一个同级元素添加clear:both属性以清除同级浮动对奇葩影响

        2).在之间添加一个带clear:both的空元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,160评论 1 92
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 908评论 0 6
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,078评论 0 2
  • 什么时候要清除浮动 其实浮动float最开始出现的意义只是为了让文字环绕图片而已。但人们发现,如果想要三个块级元素...
    xyfun阅读 8,624评论 0 14
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,131评论 0 2

友情链接更多精彩内容