CSS浮動
- (1)頁面布局方式
- (2)浮動
- (3)清除浮動
1 頁面布局方式
頁面布局方式主要包含：文檔流（正常流）、浮動流（脫離文檔流）。
文檔流：
- 文檔流中元素框的位置由元素在HTML中的位置決定，塊級元素從上到下依次排列，框之間垂直距離由框的垂直margin計算得到，行内元素在一行中水準布置。
- 文檔流就是HTML文檔中的元素如塊級元素、行内元素依據他們的顯示屬性按照在文檔中的先後順序依次顯示。塊級元素就占一行或多行，行内元素就和其它元素共處一行。
浮動流：元素從正常的排列順序被抽離
- 浮動可以使元素向左或向右移動，直到它的邊緣碰到包含框或另一個浮動框的邊框為止。
- 由于浮動框不在正常文檔流中，是以标準文檔流中的塊框表現得就像浮動框不存在一樣。
2 浮動
浮動屬性：
float:left(向左浮動)/right(向右浮動)/none(預設值)- float屬性定義元素在哪個方向浮動，通過float屬性實作元素的浮動，以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框。而不論它本身是何種元素。
- 如果浮動非替換元素,則要指定個明确的寬度;否則，它們會盡可能地窄。
2.1 左浮動
對div2進行左浮動,效果如右圖所示。
#div2{
float:left;
}
div2雖然保持在目前位置，實際上已經不在文檔流中，而在浮動流中，然後文檔流就出現空缺，于是文檔流下面的div3,div4就頂上去，與div1形成新的文檔流。
如果浮動前面的元素沒有浮動屬性，則浮動會另起一行在此元素的下面浮動。
2.2 右浮動
對div2進行右浮動,效果如圖所示。
#div2{
float:right;
}
當第二個div設定為向右浮動，那麼它就不屬于文檔流，而是成為了浮動流，剩下的div1,div3,div4重新排列。
浮動元素不在文檔流中，是以浮動後面緊跟着的元素占據了浮動原先位置。
當一個元素浮動之後，其下方裝載文字的容器雖然會占據浮動元素原先的位置，但是其中的文字會一直圍繞在浮動元素周圍，而不會被浮動元素覆寫
2.3 兩個元素同時左浮動
對div2和div3設定左浮動,效果如圖所示。
#div2,#div3{
float:left;
}
說明：
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)
2.4 一個元素左浮動一個元素右浮動
對div2設定左浮動,div3設定右浮動，主要應用于兩列網頁的布局，效果如圖所示。
#div2{
float:left;
}
#div3{
float:right;
}
2.5 總結
- 浮動元素不在标準文檔流中，是以浮動後面緊跟着的元素占據了浮動元素原先的位置。
- 浮動是比較特殊的個體，它雖然不在标準文檔流中，但是任然跟标準文檔流互相影響。
- 如果浮動前面的元素美譽浮動屬性，則浮動會另起一行在此元素的下面浮動。
- 當一個元素浮動之後，其下方裝載文字的容器雖然會占據浮動元素原先的位置，但是其中的文字會一直圍繞在浮動元素周圍，而不會被浮動元素覆寫。
3 清除浮動
3.1 浮動産生的副作用
- 背景不能顯示：如果對父級設定了css背景色或背景圖檔，而父級不能被撐開，導緻背景不能顯示。
- 邊框不能被撐開
- margin，padding不能正确顯示，特别是上下邊的margin和padding不能正确顯示。
3.2 清除浮動方法
清除浮動：
clear:left/right/both/noneclear屬性規定元素的哪一側不允許其它浮動元素。
- left:在左側不允許浮動元素。
- right:在右側不允許浮動元素。
- both:在左=兩側不允許浮動元素。
- none:預設值，允許浮動元素出現在兩側。
其它清除浮動的方法：
- 在父級元素添加最後一個子元素，子元素設定樣式clear:both;
- 給父級元素設定高度(針對背景不能顯示問題)
-
設定after為元素
div:after{display:block;clear:both;content:"";}
- 父級div定義overflow:hidden和zoom:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*#div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
#div3 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#div4 {
width: 100px;
height: 100px;
background-color: lawngreen;
float: left;
}*/
</style>
</head>
<body>
<!-- <div id="div1"></div>
<div id="div2"></div>
<div style="width: 100px;height:100px"></div>
<div id="div3"></div>
<div id="div4"></div> -->
<div id="div1" style="width: 200px;height:100px;background-color:red;">div1</div>
<div id="div2" style="float:left;width: 400px;height:100px;background-color:blue;">div2</div>
<div id="div3" style="float:right;width: 150px;height:150px;background-color:aqua;">div3</div>
<div id="div4" style="width: 100px;height:120px;background-color:green;">div4</div>
</body>
</html>