კომპიუტერი და ინტერნეტი

პროგრამირება

HTML/CSS

როგორ გავაკეთოთ Cross Browser CSS Clear Fix

ავტორი: გიორგი ნემსაძე

ადრე თუ გვიან გაჩენია კითხვა ბევრ ვებ-დეველოპერს/მარკაპერს Clear Fix-თან დაკავშირებით. მართალია Firefox ნორმალურად არენდერებს, Chrome-ც თუმცა შეიძლება იგივე არ ითქვას ჩვენს საყვარელ IE-ზე.
ინსტრუქციაში განხილულია Cross Browser CSS Clear Fix-ის მეთოდი.

 

საფეხურები

  1. 1 CSS Clear-ის კოდი
    .clear:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
    }
    .clear {
    clear:both;
    float:none;
    display:inline-block;
    }
    html[xmlns] .clear {
    display:block;
    }
    * html .clear {
    height:1%;
    overflow:visible;
    }

  2. 2
    განვიხილოთ HTML-ის მაგალითი
    <html>
    <head>
    <style type="text/css">
    /* Clear Fix [rogor.ge] */
    .clear:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
    }
    .clear {
    clear:both;
    float:none;
    display:inline-block;
    }
    html[xmlns] .clear {
    display:block;
    }
    * html .clear {
    height:1%;
    overflow:visible;
    }

    /* Test */
    .floats {
    background-color:#efefef;
    }
    .floats .float {
    float:left;
    width:150px;
    background-color:#888;
    color:#fff;
    }
    .nofloat {
    /* აბსოლუტური top:20px; ჩვენი Clear Fix-ის დახმარებით */
    margin-top:20px;
    }
    </style>
    </head>
    <body>

    <div class="floats">
    <p class="float">Float 1</p>
    <p class="float">Float 2</p>
    <p class="float">Float 3</p>
    <p class="float">Float 3</p>
    </div>

    <p class="clear"></p><!-- Clear Fix -->

    <div class="nofloat">
    No float
    </div>

    </body>
    </html>