float的四個參數：
- float:left
- float:right
- float:none
- float:inherit 繼承浮動
float:left各元素按順序排列 float:right各元素按倒序排列
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.test{
width: 100px;
height: 100px;
background: red;
margin-right: 10px;
float: right;
}
</style>
<body>
<div class="test">1</div>
<div class="test">2</div>
</body>
float: right;
float屬性實現文本環繞效果：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.per{width: 400px;
height: 400px;
border: 1px solid #ccc;
}
img{
width: 200px;
height: 100px;
}
</style>
<body>
<div class="per">
<img src="../img/dog.jpg" alt=""/>
杯子在多數時候，盛裝的僅僅是半杯水，遇見的那個人依然似乎無法填補內心的空洞，時....
</div>
在img樣式下，加float:left;
在img樣式下，加float:right;
span是內聯不能設置高寬，設置高寬則在瀏覽器中其內容顯示不出來，如果加上浮動，內聯就會變爲塊級樣式。
解決浮動副作用：
- 手動給父元素添加高度
- 通過clear清除內部和外部浮動
- 給父元素添加overfloat屬性並結合zoom:1使用
- 給父元素添加浮動
1.給.test添加浮動後，父元素的高度變爲0，此時手動給父元素添加高度。
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.per{width: 500px;
/*height: auto;*/
height: 32px;
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px ;
background: red;
border: 1px solid #ffffff;
float: left;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
2.clear屬性： clear:none|left|right|both
3.overflow和zoom組合有弊端：溢出的部分被截取了。
.per{width: 500px;
height: auto;
border: 1px solid #000;
overflow: hidden;/*處理溢出問題*/
zoom:1;}
4.給父元素添加浮動，會影響其他元素。這時就要給其他元素設置clear屬性。
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.per{width: 500px;
height: auto;
border: 1px solid #000;
float: left;
}
.test{
width: 100px;
height: 30px ;
background: red;
border: 1px solid #ffffff;
float: left;
}
.bro{
width: 100px;
height: 100px;
background: blue;
clear: both;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="bro"></div>
這裏，建議還是使用第二種方法。