div css float布局用法

float的應用與用法

想要知道float的用法，首先你要知道float在網頁中的用處。

　　浮動的目的就是為了使得設置的對象脫離標准文檔流。

　　什么是標准文檔流？

　　網頁在解析的時候，遵循於從上向下，從左向右的一個順序，而這個順序就是來源於標准文檔流。

　　也就是說，為了使元素能夠脫離元素特性的控制--即塊級元素可以並排顯示，且不設定寬度就不會占滿父元素寬度的百分之百；而行內元素可以設置寬高，並且可以並排顯示。

　　這就是所謂的脫離了標准文檔流。

float浮動用於設置對象靠左或靠右浮動樣式，可實現我們所需要的DIV，span等標簽向左、向右浮動。

---

簡單的使用語法

div {
    float:left;  /* css注釋：設置div對象浮動靠左（left） */     
    }
div {
　　float: right;/* css注釋：設置div對象浮動靠右（right） */ 
　　 }

css float浮動案例

---

我們設置在一個盒子里，放置一個靠左、一個靠右兩個盒子。為了更直觀的看到css浮動布局效果，我們為兩個盒子設置寬、高、邊框和背景顏色。

1.html代碼片段

<div class="divcss5">
    <div class="divcss5_left">float left盒子</div>
    <div class="divcss5_right">float right盒子</div>
</div>

2.css代碼片段

            .divcss5 {
                width: 500px;
                background: pink;
                border: 1px solid #F00;
                padding: 10px
            }

            .divcss5_left,.divcss5_right {
                border: 1px solid black;
                background: white;
                width: 200px;
                height: 150px
            }

            .divcss5_left {
                float: left
            }

            /* css注釋： 設置浮動靠左 */
            .divcss5_right {
                float: right
            }            

3.效果截圖

　　

 div css浮動float用法應用案例截圖

　　從效果圖可以看出來，由於沒有對兩個盒子的父元素盒子設置高度，所以導致了父元素的高度塌陷--引起高度塌陷的原因是在浮動之前，兩個子元素盒子在標准文檔流中受到特性限制，所以撐起了整個父元素盒子的高度，但是由於浮動導致了兩個子元素盒子脫離了標准文檔流，因而引起了父元素盒子的高度發生塌陷

　　父元素的高度塌陷就是浮動產生的影響導致的，要想使父元素可以正常顯示，就需要清除浮動所帶來的影響，下面介紹幾種方法。

清除浮動

---

1.隔牆法：

　　在兩個子元素盒子后面加入一個div，並設置樣式為 clear:both，可以清除浮動所帶來的影響，具體用法請見這里

<div class="divcss5">
    <div class="divcss5_left">float left盒子</div>
    <div class="divcss5_right">float right盒子</div>
    <div style="clear: both;"></div>
</div>

2.一種較為成熟的方法

　　這種方法直接使用即可，在html代碼中的父元素盒子中加入clearfix

<div class="divcss5 clearfix">
    <div class="divcss5_left">float left盒子</div>
    <div class="divcss5_right">float right盒子</div>
</div>

　　css代碼--直接粘貼復制到css代碼中即可

.clearfix {
    /* 兼容ie */
    *zoom: 1
}
/* 當前元素的前后，添加一個空白，且將當前元素轉換成table類型 */
.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}    
.clearfix:after {
    clear: both
}

3.為父元素設置一個高度

.divcss5 {
    width: 500px;
    background: pink;
    border: 1px solid #F00;
    padding: 10px;
    height: 150px;
}

　　父元素盒子樣式的其他設置不變，只需要新增height:150px;保證父元素的高度不會塌陷即可。

4.overflow:hidden

.divcss5 {
    width: 500px;
    background: pink;
    border: 1px solid #F00;
    padding: 10px;
    overflow:hidden;
}

　　overflow:hidden之所以可以清除浮動，主要是觸發了BFC效果，BFC效果詳見這里

　　而在IE比較低版本的瀏覽器中，如果使用overflow:hidden;是不能達到這樣的效果的，需要加上zoom:1;

　　所以如果需要使用overflow:hidden來清除浮動的話，為了讓兼容性更好，最好加上zoom:1;

效果截圖