zoukankan      html  css  js  c++  java
  • CSS常用清除浮动方法总结

    1.对父元素使用overflow:hidden;zoom:1,或者是overflow:auto;zoom:1。

    兼容性问题:该处使用zoom:1是为了兼容ie6,但是实际上,用height:1%;代替zoom:1;更好,因为它可以通过W3C。

    该方法缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

    2.在浮动元素后面添加新的元素,再使用clear:both。缺点:无意义的空标签,不利于语义化。

    3.给浮动元素的父元素使用:after伪元素。如下:

     .outer{zoom:1;}

     .outer:after{

    clear:both;

    display:block;

    content:".";

    0;

    height:0;

    visibility:hidden;

    其中content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。

    同时,由于IE6-7不支持:after,使用 zoom:1 触发 hasLayout。

    关于zoom:1

    zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
    但很遗憾的是,它通不过W3C验证.

  • 相关阅读:
    对this的浅解
    Java设计模式---工厂模式学习笔记
    MyBatis入门
    Java设计模式---单例模式学习笔记
    java设计模式--七大原则
    Servlet request常用方法
    maven中导入jdbc的坑
    Servlet生命周期
    JQuery选择器
    Test
  • 原文地址:https://www.cnblogs.com/xmll/p/4889861.html
Copyright © 2011-2022 走看看