<code id="m9lif"><sup id="m9lif"><track id="m9lif"></track></sup></code>
<pre id="m9lif"></pre>

  • DIV+CSS中clear:both(清除浮動問題)

    2016/8/16 8:39:45   閱讀:2496    發布者:2496

    1.  三個關于浮動的概念

     不浮動float:none;

     清除周圍的浮動元素   float:both   這是清除浮動的本意

     清除子元素浮動對父元素的影響  clearfix    很多人都理解成這個叫清除浮動。。

     

    2. 什么是清除浮動

    清除浮動不是把當前標簽的浮動給清除了,如果這樣,還加浮動做什么

    其實清除浮動指的是清楚當前元素旁邊的浮動元素,但是當前元素又不能影響別人,打不贏就跑,所以自己就跑到下面去了。

     

    3. 為什么要清楚浮動

    在布局的時候我們經常希望某些內容能夠水平排布,水平排布后,由于內部內容不確定,高度不能簡單的給一個定值。而如果不給高度,子元素又都浮動了,父盒子就會因為沒有子盒子的支撐而塌陷。

    利用清除浮動的這個特性,我們可以給父元素中最后一個不浮動的盒子使用clear:both從而把父盒子的高度撐起來,并且能夠根據內部內容的變化而改變高度。

     

    4.  清楚浮動的方法

      4.1.       額外標簽法

        原理:單獨使用一個標簽加上clear:both跑到浮動元素下面,從而消除子盒子浮動造成的父盒子塌陷。

        優點:通俗易懂,容易掌握

        缺點:添加很多無意義的空標簽,不符合結構與表現分離的原則,不利于后期維護

      4.2.       父元素設置overflow:hidden

        原理:讓父盒子形成BFC,BFC的特性之一就是可以承載浮動元素

        優點:不存在結構和語義化問題,代碼量極少

        缺點:內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢出的元素

      4.3.       單偽元素

         .clearfix:after {
            content: "";
            height: 0;
            visibility: hidden;
            overflow: hidden;
            dispaly: block;
            clear: both;
        }
        .clearfix {
            zoom: 1;/*IE67*/
        }

      4.4       雙偽元素

        .clearfix簡介

        .clearfix:before, .clearfix:after {
              content: "";
              display: table;
        }/*在有該類的元素內部元素的前面和后面添加元素*/
        .clearfix:after {
            clear: both;
        }/*只要after兩側有浮動元素,after就會跑到最下面,從而撐開帶有該類名的父盒子*/
        .clearfix {
            *zoom: 1;
        } /*用于兼容IE/7/6*/

         用display:table是因為display:block有空隙

        加了一個before是為了防止外邊距合并

    国产a免费一级视频_一级黄片欧美尤物_久久美女网操bb_国产91 在线视频
    <code id="m9lif"><sup id="m9lif"><track id="m9lif"></track></sup></code>
    <pre id="m9lif"></pre>