zoukankan      html  css  js  c++  java
  • 【推荐】万能清除浮动样式

    这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。

    这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。

    01 <style type="text/css">
    02 .clearfix:after {
    03     content: ".";
    04     display: block;
    05     height: 0;
    06     clear: both;
    07     visibility: hidden;
    08 }
    09 .clearfix {display: inline-block;}  /* for IE/Mac */
    10  
    11 </style>
    12 <!-- main stylesheet ends, CC with new stylesheet below... -->
    13  
    14 <!--[if IE]>
    15 <style type="text/css">
    16 .clearfix {
    17     zoom: 1;            /* triggers hasLayout */
    18     display: block;     /* resets display for IE/Win */
    19 }
    20 /* Only IE can see inside the conditional comment
    21 and read this CSS rule. Don't ever use a normal HTML
    22 comment inside the CC or it will close prematurely. */
    23 </style>
    24 <![endif]-->

    Update @ 2008.11.12

    刚刚看到一篇日志说这个问题,受到了点启发:

    1 .clearfix:after {
    2     content: "020";
    3     display: block;
    4     height: 0;
    5     clear: both;
    6 }
    7 .clearfix {
    8     zoom: 1;
    9 }

    这个是优化版的清除浮动的样式,很值得推荐。

    另外,我见到了一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。

    01 html body div.clear,
    02 html body span.clear
    03 {
    04     background: none;
    05     border: 0;
    06     clear: both;
    07     display: block;
    08     float: none;
    09     font-size: 0;
    10     margin: 0;
    11     padding: 0;
    12     overflow: hidden;
    13     visibility: hidden;
    14     width: 0;
    15     height: 0;
    16 }

    这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

    这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。

  • 相关阅读:
    4. Median of Two Sorted Arrays
    680. Valid Palindrome II
    11. Container With Most Water
    10. Regular Expression Matching
    1_Utilities__deviceQuery + 1_Utilities__deviceQueryDrv + 1_Utilities__topologyQuery
    1_Utilities__bandwidthTest
    CUDA C Programming Guide 在线教程学习笔记 Part 11
    hdu 3790 最短路径问题
    hdu 1050 Moving Tables
    斯特林公式 hdu1018
  • 原文地址:https://www.cnblogs.com/couxiaozi1983/p/2503866.html
Copyright © 2011-2022 走看看