• 清除浮动的方法


     

    1.给父级div设置heigh

       原理: 父级手动定义height,解决了父级div无法自动获取到高度的问题

       优点:简单,代码少

       缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

       不建议使用只是建议高度固定的布局时使用

    2.在结尾处加空div标签clear:both

       原理:添加一个空div,利用clear:both清除浮动,让父级div能自动湖区高度

       优点:简单代码少,浏览器支持好

       缺点:很多初学者不理解原理,如果页面浮动多就要增加很多空div,让结构复杂

       不推荐使用,这是以前主流的清除浮动的方法

    3.父级div定义伪类:after 和zoom

      原理:IE8以上和非IE浏览器才支持:after,原理和方法2类似,zoom(IE专有属性),可解决ie6,ie7的浮动问题

           优点:浏览器支持好,不容易出怪问题

      缺点:代码多, 很多人不理解原理,要两句代码结合使用,才能让主流浏览器支持

        建议使用,建议定义公共类,增加可重复利用性

    4.父级div定义overflow:hidden

         原理:必须定义width或者zoom:1,同时不能定义height,使用它的时候,浏览器会自动检查浮动区域高度

         优点:简单,代码少,浏览器支持好

         缺点:不能和position配和使用,因为超出的尺寸会被隐藏

      只推荐没有使用position或duioverflow:hidden理解比较深的时候使用

    5.父级div定义overflow:auto

       原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 
       优点:简单,代码少,浏览器支持好 
     缺点:内部宽高超过父级div时,会出现滚动条。 
       不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

    6.父级div也一起浮动

      原理:所有代码一起浮动,就变成了一个整体 
         优点:没有优点 
         缺点:会产生新的浮动问题。 
         建议:不推荐使用,只作了解。

    7.结尾处加br标签clear:both

        原理:父级div定义zoom:1来解决IE浮动问题,结尾处加br标签clear:both

    8.替代浮动方法要浮动的元素设置display:inline-block

      优点:整体代码简洁了很多,这是他的价值所在 
      缺点:有浏览器兼容问题;只有特定的场合适用,像水平菜单条之类,布局之类,并不适合文字环绕         图片这些真正需要float的场合;元素间的纯空白会造成占位

  • 相关阅读:
    右上角的 那个 个数,
    i am sorry,
    搞定了,一个是重复,一个是 判断navigationcontroller里面 最后的那个类,
    ios no code signature found,
    这次逻辑通了,
    分析下现在 遇到的这个棘手的问题,
    时间 折腾我的,
    老大说 调到 4寸的 就不用适配 5了,
    应用程序生命周期,
    解决【npm ERR! Unexpected end of JSON input while parsing near '...sh_time":141072930277'】方案
  • 原文地址:https://www.cnblogs.com/mrszhou/p/7402355.html
Copyright © 2020-2023  润新知