浮動及浮動相關問題(初次)

這僅是我我的看到的，若是補充，還請你們不要吝嗇當個鍵盤俠，謝謝！

文檔流

文檔中可顯示的元素在排列時候的開始位置以及他們所佔的區域。

由於頁面中的元素分爲不一樣的種類，因此他們會按各自的特色去顯示，在頁面中所佔的區域不是同樣的。會按從上到下，從左到右的順序輸出內容。

浮動 float

定義

使元素脫離文檔流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來，當浮動並非全動脫離文檔流。
值            left、right、none
特徵
    一、塊元素能夠在一行顯示
    二、按照一個指定的方向移動，遇到父級的邊界或者相鄰的浮動元素就會停下來
    三、行內元素支持寬高
    四、脫離文檔流
    五、塊元素默認寬度會改變(包裹性)
    六、父級高度塌陷(破壞性)
          子元素浮動後，父元素高度不會自動撐開。
    七、換行不會被解析成空格
     浮動後的元素就會脫離文檔流了，那它就不屬於文檔流裏的結構了，因此換行、空格都跟父級不要緊了

特徵四、脫離文檔實例：

html部分

<div class="divdemo">divdemo1</div>
<div class="divdemo02">divdemo02</div>
<span>hello</span>

css部分

div{
    float:left;
    width:100px;
    height:100px;
    background:yellowgreen;
}
span{
    float:right;
    width:100px;
    height:100px;
    border:1px solid #333;
}

特徵五、塊級元素默認高度會改變

<!--html部分-->    
    <div>hello world</div>
/*css代碼部分*/
    .div{
        height:50px;
        floalt:left;
        border:1px solid #333;
    }

特徵六、父元素高度塌陷實例

<!--html代碼-->
<div class= "parent">
    <div class= "children">do you relaize something?</div>
</div>
/*css代碼*/
.parent{
    /*float:left;*/
    border:1px solid #333;
}
.children{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #f00;
    background: #ccc
}

七、換行不會被解析成空格

<!--htm代碼-->

<div class="parent">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>
/*css代碼*/
.parent{
    border: 1px solid #f00;
}
.box{
    width: 100px;
    height: 200px;
    background: green;
    color: #fff;
    float: left;
}

脫離文檔流

脫離文檔流指的是元素不在頁面中佔位置，定位是徹底脫離文檔流

實例：
html代碼

<div class="div1"></div>
<span>指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。元素不在頁面中佔位置了，但指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。是文檔卻還佔着位置。。。的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。指的是元素不在頁面中佔位置了，可是文檔卻還佔着位置。。。</span>

css代碼

.div1{
    width: 100px;
    height: 50px;
    background: green;
    color: #fff;
    border: 5px solid blue;
    float: left;
    /*margin: 20px;
    padding: 20px;*/
}
span{
    width:100px;
    height:50px;
}

float與inline-block的區別

對於這一個區別，除了前面脫離文檔流和父元素高度塌陷的差別，還有一個區別是：
若是一排元素高度不一至的狀況下，想讓他們按順序排列就能夠選擇inline-block

實例：

<!--html代碼-->
    <ul>
        <li>1</li>
        <li style="height: 200px;">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
/*css代碼*/
    ul{
        width: 300px;
        font-size: 0;
    }
    li{
        list-style: none;
        width: 100px;
        height: 150px;
        background: green;
        font-size: 40px;
        text-align: center;
        line-height: 150px;
        color: #fff;
        /*float: left;*/
        /*float: right;*/
        display: inline-block;
    }

清除浮動的若干方法：

清除浮動的方法

一、clear
二、給父級添加高度
    有的時候是不能給父級添加高度的，因此這個方法就用不了（父級沒有高度的狀況下）
三、inline-block
    具胡與上一個的清除浮動同樣的老是，同時加了之後這個元素就沒有辦法居中了
四、overflow:hidden;
    若是子級有定位的話，而且這個定位超出了父級的範圍，那樣的話就看不到了，因此不能加這個命令
五、空標籤
    空標籤是沒有內容，可是它的做用是用來清除浮動的，因此不符合行爲、樣式、結構相分離的標準
    ie6下標籤是有一個最小高度19px，解決後也會有2像素的誤差
六、br清除浮動
    與上面的問題是同樣
七、after僞類清除浮動
    after    表明選擇到的元素的內容的最後面
            after僞類的內容默認是一個行內元素
    content        設置的內容

代碼示例：

<!--html代碼-->
<div class="parent clearfix">
    <div class="box"></div>
    <!--<div style="clear: both;"></div>-->
    <br clear="all" />
</div>
/*css代碼*/
.parent{
    border: 1px solid #f00;
    /*height: 100px;*/
    /*display: inline-block;
    margin: 0 auto;*/
    /*overflow: hidden;*/
}
.clearfix:after{
    content:' ';
    display:block;
    clear:both;
}
.box{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}