前端學習筆記（四）——浮動

浮動

浮動的概念：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

使用的場景：用于設定對象靠左與靠右浮動樣式，用來做頁面布局，主要是用在塊元素的橫向布局場景下。

float文法：

           float常跟屬性值left、right、none

           float:none;          不使用浮動

           float:left;             靠左浮動

           float:right;           靠右浮動

div{float:left} /* 設定div對象浮動靠左（left） */ 
div{float:right} /* 設定div對象浮動靠右(right) */ 
           

文檔流：文檔中所有元素所處的位置，系統在解析我們的代碼時時按照從上到下從左到右的順序依次解析的。

浮動的特點：

             1.設定了浮動的元素，該元素的大小預設由内容撐出。

             2.設定了浮動的元素會變成一個塊級元素，不管它本身是什麼，是以可以設定寬高。

             3.設定了浮動的元素，水準浮動直到遇到父級的邊框或者另一個浮動元素。

             4.浮動的元素，脫離文檔流，會影響後面的元素。當後面的元素上面有文字或者圖檔時，文字或者圖檔内容不會受影響，不過還是會影響文檔的布局。我們可以用這種特性做文字環繞效果。

             5.浮動的元素，自動margin失效。

浮動造成的影響：

1.一個元素浮動後會影響到它後面的元素。

2.當父級沒有設定高度時，其高度預設由内容撐出，此時如果父級裡的元素發生浮動，父級會發生“内容塌陷”

清除浮動：

上面兩種情況影響到了頁面的結構布局，是以大多數時候我們設定完浮動後要進行相應的清浮動操作，方法如下。

方法一：使用帶clear屬性的空元素

在浮動元素後使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清  浮動，或直接添加行内元素<div style="clear:both"></div>。其他标簽br等亦可。

.box{
    padding:5px;
    border: 1px solid #000;
}
.box p {
    float: right;
}
.box img {
    float: left;
}
.clear {
    clear: both;
}

<div class="box">
    <p>自定義文字</p>
    <img src="img.png" />
    <div class="clear"></div>
    <!-- <div style="clear:both"></div> -->
</div>
           

           優點：簡單，代碼少，通俗易懂，容易掌握，浏覽器相容性好。

           缺點：會添加大量無意義的空标簽，代碼不夠優雅，有違結構與表現的分離，後期不容易維護。（不推薦使用）

方法二：父級div定義 height

元素浮動後會造成父級内容塌陷，即父級會當沒有那個浮動元素，高度若沒有其他元素撐起會自動拾取浮動元素的高度

<style>
    .div1{
        background:#000080;
        /*解決代碼*/
        height:200px;
    }
    .div2{
        background:#800080;
        height:100px;
        margin-top:10px;
    }
    .left{
        float:left;
        width:20%;
        height:200px;
        background:#DDD
    }
    .right{
        float:right;
        width:30%;
        height:80px;
        background:#DDD
    }
</style>

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
           

優點：簡單、代碼少、容易掌握。

           缺點：隻适合高度固定的布局，要給出精确的高度，如果高度和父級div不一樣時，會産生問題。對于響應式布局會有很大影響。（視情況可用,盡量不用或者少用）

方法三：父元素也設定浮動

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

           缺點：使得與父元素相鄰的元素的布局會受到影響，會産生新的浮動問題，不可能一直浮動到body。（不推薦使用）

方法四：父元素設定 overflow：hidden

給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

<style>
    .div1{
        background:#000080;
        /*解決代碼*/
        overflow:hidden;
    }
    .div2{
        background:#800080;
        height:100px;
        margin-top:10px;
    }
    .left{
        float:left;
        width:20%;
        height:200px;
        background:#DDD
    }
    .right{
        float:right;
        width:30%;
        height:80px;
        background:#DDD
    }
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
           

優點：不存在結構和語義化問題，代碼量極少，浏覽器支援好。

           缺點：不能和position配合使用，無法顯示需要溢出的元素，因為超出的尺寸的會被隐藏。（視情況可用，盡量少用）

方法五：after僞元素清浮動

after 僞元素（注意這不是僞類，而是僞元素，代表一個元素之後最近的元素）和 IEhack ，可以完美相容目前主流的各大浏覽器，這裡的 IEhack 指的是觸發 hasLayout，例如使用 zoom:1。給浮動元素的容器添加一個clearfix的class，然後給這個class添加一個:after僞元素實作元素末尾添加一個看不見的塊元素（Block element）清理浮動。

<style type="text/css">
.div1{
    background:#000080;
}
.div2{
    background:#800080;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.right{
    float:right;
    width:30%;
    height:80px;
    background:#DDD
}

/*清除浮動代碼*/
.clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{
    zoom:1
}
</style>

<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
           

           優點：浏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等） 

           缺點：代碼多、不少初學者不了解原理，要兩句代碼結合使用才能讓主流浏覽器都支援。（推薦使用，建議定義公共類，以減少CSS代碼）

display:inline-block;也可以把塊元素橫向布局，但有弊端：

1.改變了元素的特性.

2.低版本的ie浏覽器不支援display:inline-block;

文字環繞效果：

<style type="text/css">
	p{
		width: 500px;
		font-size:25px;
		background-color:cyan;
	}
	img{
		float:left;
	}
</style>

<body>
	<img src="dog.jpg" alt="">
	<p>這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈這是一個二哈</p>
</body>