zoukankan      html  css  js  c++  java
  • float

    float:
    float元素的父元素不能指定clear属性
    MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。
    这是MacIE的著名的bug,倘若不知道就会走弯路。
    float元素务必指定width属性
    很多浏览器在显示未指定width的float元素时会有bug。
    所以不管float元素的内容如何,一定要为其指定width属性。
    另外指定元素时尽量使用em而不是px做单位。
    float元素不能指定margin和padding等属性
    IE在显示指定了margin和padding的float元素时有bug。
    因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。
    也可以使用hack方法为IE指定特别的值。
    float元素的宽度之和要小于100%
    如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

    float的div一定要闭合
    例如:(其中floatA、floatB的属性已经设置为float:left;)
    程序代码
    <#div id="floatA" ></#div>
    <#div id="floatB" ></#div>
    <#div id="NOTfloatC" ></#div>
    这里的NOTfloatC并不希望继续平移,而是希望往下排。
    这段代码在IE中毫无问题,问题出在FF。
    原因是NOTfloatC并非float标签,必须将float标签闭合。
    在程序代码
    <#div class="floatB"></#div>
    <#div class="NOTfloatC"></#div>
    之间加上 程序代码
    <#div class="clear"></#div>
    这个div一定要注意声明位置,一定要放在最恰当的地方,
    而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
    并且将clear这种样式定义为为如下即可:
    程序代码 .clear{ clear:both; }
    此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
    当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义: 程序代码 .colwrapper{ overflow:hidden; zoom:1; margin:5px auto; }


    清除浮动
    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级 做一次定义,那么就可以解决这个问题。
    select:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    想要别人给你鼓掌,先学会给别人鼓掌
  • 相关阅读:
    RN-Android构建失败:Caused by: org.gradle.api.ProjectConfigurationException: A problem occurred configuring root project 'AwesomeProject'.
    Android更新包下载成功后不出现安装界面
    真机调试: The application could not be installed: INSTALL_FAILED_TEST_ONLY
    react native 屏幕尺寸转换
    Android Studio生成签名文件,自动签名,以及获取SHA1和MD5值
    React Native安卓真机调试
    git提交代码报错Permission denied, please try again
    The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.
    命令行设置快捷命令
    Linux 常用指令
  • 原文地址:https://www.cnblogs.com/fjqq/p/4671151.html
Copyright © 2011-2022 走看看