zoukankan      html  css  js  c++  java
  • 清除浮动的方式以及各自的优劣

    为什么要清除浮动
    浮动会使当前标签产生向上浮的效果,导致不同浏览器在计算父级元素高度,或者显示前后标签位置的时候产生意想不到的问题。


    清除浮动的方法

    1. 为父元素定义height
    2. 设置父元素浮动,同时为其设置高度
    3. 在浮动元素的后面添加一个空的div标签,并为新添加的标签设置clear:both
    4. 在浮动元素的后面添加一个空的br标签,并为新添加的标签设置clear:both
    5. 为父元素设置overflow:hidden
    6. 为父元素设置overflow:auto
    7. 为父元素设置display:table
    8. 为父元素设置zoom属性,并为其添加一个伪类:after,同时设置伪类clear:both

    每种方法的分析

    1. 为父元素设置高度,至少可以保证父元素级别的内容可以正常显示,但是有两个问题:
      ①父元素固定高度,而内部子元素的高度可能是动态的,这样会导致出现滚动条
      ②浮动元素的兄弟元素位置的显示可能还是不正常。
    2. 为父元素设置高度,原理与上面的类似,只是在第一个的基础上添加了浮动
    3. 为浮动元素后面添加空的div,然后设置空div清除浮动,会导致代码冗余,当页面浮动元素较多时,HTML代码中会有很多空div,显得很low。
    4. 与第三个相似,只是div标签换为了br标签。
    5. 为父元素设置zoom属性,同时设置overflow:hidden,会导致当子元素的内容为动态的时候,内容可能会被隐藏,且不能配合position:relative仪器使用。
    6. 与overflow:hidden相比,overflow:hidden的问题是可能会出现滚动条。
    7. 为父元素设置display:table,个人感觉会出现未知的问题。
    8. 为父元素设置zoom属性,并配合伪类一起使用时,浏览兼容性好,但问题是必须两个配合使用。

    推荐方法
    推荐使用第八种方法,原因:

    • 代码简单,无冗余HTML代码
    • 兼容性好,大部分浏览器都支持。
  • 相关阅读:
    严援朝座右铭
    王治郅 请让爱国走下神坛
    Java 事件处理实例
    SAP ERP 与 Oracle ERP 比较
    Gantt Component for Delphi Pure Pascal code(TsyGantt VCL)
    XMLRPC vs. SOAP
    Interfaces with Constants Only(java中通用常量定义)
    船舶设计软件简介
    DelphiARX 2000i 简介
    JAVA事件适配器用内部类,匿名类实现事件处理
  • 原文地址:https://www.cnblogs.com/leena/p/6929178.html
Copyright © 2011-2022 走看看