【CSS】div 經驗分享：CSS浮動(float,clear)通俗講解

1、div內容溢出

.remark-div {
    overflow: auto;
    height: auto;
    max-height: 100px;
}

一、溢出

　　overflow :auto時，內容超過指定高度會出現滾動條

　　overflow：hidden時，不顯示超過對象（div）尺寸的內容

二、須要設置高度

　　max-height 設置一個最大的高度，超過則顯示滾動條；

　　height:auo，不超過設置的最大高度時，讓內容自動決定高度。

 

2、div相互重疊

一、上下重疊

要麼清除浮動，要麼設置「div」高度，通常狀況下文字內容不肯定多少 就不能設置固定的高度，

因此通常不能設置「.div」高度(固然能肯定內容多高，這種狀況下「.div」是能夠設置一個高度便可解決覆蓋問題。)。

清除浮動有兩種方法

• clear

.clear{ clear:both} 
<div class="boxa"> 
    <div class="boxa-l">內容左</div> 
    <div class="boxa-r">內容右</div> 
    <div class="clear"></div> 
</div> 

• overflow:hidden

　　對「.boxa」（子級有浮動的父級盒子加overflow:hidden）

 

 二、左右重疊

　　要麼都不使用浮動；

　　要麼都使用float浮動；

　　要麼對沒有使用float浮動的DIV設置margin樣式。

好比這裏「.aa」對應盒子會固定寬度爲300px;這個使用對「.bb」對應盒子設置margin-left:302px（大於300便可，本身測試設置須要的值）實現不重疊覆蓋現象。

3、CSS浮動與清除浮動

• CSS浮動

一、首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流（標準流）。

二、浮動的出發點是：「如何在一行顯示多個div元素」。

       顯然標準流已經沒法知足需求，這就要用到浮動。      

       浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

三、假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。

       div的順序是HTML代碼中div的順序決定的。

       靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。

四、元素浮動以前，也就是在標準流中，是豎向排列的，而浮動以後能夠理解爲橫向排列。

參考：經驗分享：CSS浮動(float,clear)通俗講解

• 清除浮動

 語法：clear : none | left | right | both

 取值：

       none  :  默認值。容許兩邊均可以有浮動對象

       left   :  不容許左邊有浮動對象

       right  :  不容許右邊有浮動對象

       both  :  不容許有浮動對象

  對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

看一個例子：

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

View Code

這裏我沒有給最外層的DIV.outer 設置高度，可是咱們知道若是它裏面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。可是當內層元素浮動後，就出現了一下影響：

    （1）：背景不能顯示 （2）：邊框不能撐開 （3）：margin 設置值不能正確顯示

添加新的元素以清除浮動 、應用 clear：both；

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

View Code

結果：

 

4、用div寫一個方框

效果以下：

 

代碼：

 <div style="width:20px;height:20px;border:solid 2px;float:left">
        </div>
        <div style="margin-left:40px;">
            本人謹表明本人
</div>

View Code