CSS float
我們來看看CSS重要屬性--float。
以下內容分為如下小節：
1：float屬性
2：float屬性的特性
2.1：float之文字環繞效果
2.2：float之父元素高度塌陷
3：清除浮動的方法
3.1：html法
3.2：css偽元素法
4：float去空格化
5：float元素塊狀化
6：float流體布局
6.1：單側固定
6.2：DOM與顯示位置不同的單側固定
6.3：DOM與顯示位置相同的單側固定
6.4：智能布局
1：float屬性
float，顧名思義是漂浮，浮動的意思。但是在css中，它被理解成浮動。float有四個屬性，即
1 float:none; 2 float:left; 3 float:right; 4 float:inherit;
比較常用的兩個屬性值是左浮動和右浮動。在接下來的分享中，只會拿左浮動作為例子。其他浮動屬性值與左浮動原理相同。
2：float屬性的特性
2.1：float之文字環繞效果
浮動的初衷就是為了文字環繞效果。
看如下代碼和demo。
1 <div class="container"> 2 <div class="content"></div> 3 <p> 4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World! 5 </p> 6 </div>
1 .container {
2 width: 300px;
3 height: 300px;
4 border: 1px solid black;
5 }
6 .container .content {
7 float: left;
8 width: 150px;
9 height: 150px;
10 background-color: lightpink;
11 margin: 5px;
12 }
content 元素設置了左浮動，使div元素脫離文檔流，文字在其周圍壞繞顯示。
2.2：float之父元素高度塌陷
以div元素為例。div元素的高度會通過內容自動撐開。也就是說，內容有多少，高度就有多高。但是當內部元素設置了float屬性之后，會是父元素高度塌陷。代碼和實例如下。
1 <div class="container"> 2 <p> 3 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World! 4 </p> 5 </div>
如下，塌陷后css和demo。
1 .container {
2 width: 300px;
3 border: 1px solid black;
4 }
5 .container p {
6 float: left;
7 }
可以看出，子元素設置浮動前后發生的變化。
3：清除浮動的方法
那么問題來了，如果內部元素要設置浮動，那如何避免父元素高度塌陷的問題呢？
有同學肯定會想，直接在父元素設置高度不就可以了嗎？這在實際中是不行的。因為如果固定了父元素的高度，那如果之后想在其添加內容，不是又要去修改css代碼了，特麻煩。
那解決父元素高度塌陷有兩種方法。
3.1：父元素底部添加空div，然后在添加屬性clear : both。
代碼如下。
1 <div class="container"> 2 <p> 3 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World! 4 </p> 5 <div class="clearfix"></div> 6 </div>
1 .container {
2 width: 300px;
3 border: 1px solid black;
4 }
5 .container p {
6 float: left;
7 }
8 .container .clearfix {
9 overflow: hidden;
10 *zoom: 1;
11 }
3.2：父元素設置偽類after。
1 <div class="container"> 2 <p> 3 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World! 4 </p> 5 </div>
1 .container {
2 width: 300px;
3 border: 1px solid black;
4 *zoom: 1;
5 }
6 .container p {
7 float: left;
8 }
9 .container:after {
10 content: "";
11 display: table;
12 clear: both;
13 }
4：float元素去空格化
是什么意思呢？在平時的編碼中，為了要符合HTML編碼規范，都會為html標簽添加縮進，達到美觀的效果。可是縮進時就會產生空格，也就是 。當給元素設置左浮動時，元素本身左浮動，剩余的空格會被擠到最后，也就是上文所說的文字環繞效果。但是，要記住一點， 和回車敲下的空格的效果略有不同。
5：float元素塊狀化
在為內聯元素設置浮動屬性之后，display屬性由inline變成block。并且可以為內聯元素設置寬高。使用float加width屬性可以實現一些簡單的固定寬度的布局效果。
6：float流體布局
6.1：單側固定，右側自適應的布局。
1 <div class="container"> 2 <div class="left">左浮動+固定寬度</div> 3 <div class="right">右邊自適應寬度+margin-left</div> 4 </div>
1 .container{
2 max-width:90%;
3 margin:0 auto;
4 }
5
6 .left{
7 float:left;
8 text-align:center;
9 background-color: lightpink;
10 width: 200px;
11 height:300px;
12 }
13
14 .right{
15 background-color: lightyellow;
16 margin-left:200px;
17 height:300px;
18 padding-left:10px;
19 }
6.2：DOM與顯示位置不同的單側固定
1 <div class="container"> 2 <div class="right">右浮動+固定寬度</div> 3 <div class="left">左邊自適應寬度+margin-right</div> 4 </div>
1 .container {
2 max-width: 90%;
3 margin: 0 auto;
4 }
5 .container .right {
6 float: right;
7 width: 200px;
8 height: 200px;
9 background-color: lightpink;
10 }
11 .container .left {
12 background-color: lightyellow;
13 margin-right: 200px;
14 height: 300px;
15 padding-left: 10px;
16 }
也就是說，html元素與顯示在頁面上的元素位置不相同。
6.3：DOM與顯示位置相同的單側固定
1 <div class="container"> 2 <div class="left-content"> 3 <!-- 左浮動+width100% --> 4 <div class="left">margin-right</div> 5 </div> 6 <div class="right">左浮動+固定寬度+margin-left負值</div> 7 </div>
1 .container {
2 max-width: 90%;
3 margin: 0 auto;
4 }
5 .container .right {
6 float: left;
7 width: 200px;
8 height: 200px;
9 background-color: lightpink;
10 margin-left: -200px;
11 height: 300px;
12 }
13 .container .left {
14 background-color: lightyellow;
15 margin-right: 200px;
16 height: 300px;
17 text-align: center;
18 }
6.4：智能布局
所謂智能布局，就是兩欄都不需要設置寬度，寬度隨內容自適應。
1 <div class="container"> 2 <div class="left"> 3 float+margin-right+自適應寬度 4 </div> 5 <div class="right"> 6 display:table-cell ---IE8+; 7 display:inline-block ---IE7+; 8 自適應寬度 9 </div> 10 </div>
1 .container {
2 max-width: 90%;
3 margin: 0 auto;
4 }
5 .container .left {
6 float: left;
7 height: 300px;
8 background-color: lightpink;
9 }
10 .container .right {
11 display: table-cell;
12 *display: inline-block;
13 height: 300px;
14 background-color: lightyellow;
15 }
總結以下：
1：當一個元素設置float屬性時，會使元素塊狀化。
2：float屬性的創造初衷就是為了文字環繞效果而生的。
3：float元素會使父元素高度塌陷。
4：float元素會除去換行帶來的空格。
5：使用float可以實現兩欄自適應的布局。
轉載請注明出處：http://www.cnblogs.com/Uncle-Keith/p/5782228.html
總結
- 上一篇： Java---jdk与jre的区别
- 下一篇： 告别恼人的水平滚动条——滚动条宽度到底是