浮動
通過浮動，可以使一個元素向其父元素的左側或右側移動，使用 float 屬性來設置元素的浮動
可選值：
- none 默認值， 元素不浮動
- left 元素向左浮動
- right 元素向右浮動
注意：
- 元素設置浮動以後，水平佈局的等式便不需要強制成立
- 元素設置浮動以後，會完全從文檔流中脫離，不再佔用文檔流的位置，所以元素下邊的還在文檔流中的元素會自動向上移動
未設置浮動
設置浮動
浮動的特點：
- 浮動元素會完全脫離文檔流，不再佔據文檔流中的位置
- 設置浮動以後元素會向父元素的左側或右側移動
- 浮動元素默認不會從父元素中移出
- 浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素
- 如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移
- 浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
簡單總結：
浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列， 通過浮動可以製作一些水平方向的佈局
代碼：
<!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>
.box1{
width: 100px;
height: 100px;
background-color: #000;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
文字和圖片
浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍， 所以我們可以利用浮動來設置文字環繞圖片的效果
未加浮動效果時
加了浮動效果
元素設置浮動以後，將會從文檔流中脫離，從文檔流中脫離後，元素的一些特點也會發生變化
脫離文檔流的特點：
塊元素：
-
塊元素不在獨佔頁面的一行
-
脫離文檔流以後，塊元素的寬度和高度默認都被內容撐開
行內元素：
- 行內元素脫離文檔流以後會變成塊元素，特點和塊元素一樣
- 脫離文檔流以後，不需要再區分塊和行內了
高度塌陷和BFC
高度塌陷的問題：
在浮動佈局中，父元素的高度默認是被子元素撐開的，當子元素浮動後，其會完全脫離文檔流，子元素從文檔流中脫離，將會無法撐起父元素的高度，導致父元素的高度丟失，父元素高度丟失以後，其下的元素會自動上移，導致頁面的佈局混亂，所以高度塌陷是浮動佈局中比較常見的一個問題，這個問題我們必須要進行處理！
BFC(Block Formatting Context) 塊級格式化環境
-
BFC是一個CSS中的一個隱含的屬性，可以爲一個元素開啓BFC
-
開啓BFC該元素會變成一個獨立的佈局區域
-
元素開啓BFC後的特點：
1.開啓BFC的元素不會被浮動元素所覆蓋
2.開啓BFC的元素子元素和父元素外邊距不會重疊
3.開啓BFC的元素可以包含浮動的子元素 -
可以通過一些特殊方式來開啓元素的BFC：
1.設置元素的浮動（不推薦）
2.將元素設置爲行內塊元素（不推薦）
3.將元素的overflow設置爲一個非visible的值
4.常用的方式爲元素設置 overflow:hidden 開啓其BFC 以使其可以包含浮動元素
如何清除浮動
方法一
直接設置父元素的高度，必須要知道父元素高度是多少
方法二
在父元素中，追加空子元素，並設置其clear屬性爲both，clear是css中專用於清除浮動的屬性
clear 取值：
1、none：默認值，不做任何清除浮動的操作
2、left：清除前面元素左浮動帶來的影響
3、right：清除前面元素右浮動帶來的影響
4、both：清除前面元素所有浮動帶來的影響
方法三
設置父元素浮動
方法四
爲父元素設置overflow屬性，取值：hidden 或 auto
方法五
父元素設置display:table
方法六
使用after僞類解決高度塌陷
.box1::after{
content: '';
display: block;
clear: both;
}
clearfix 這個樣式可以同時解決高度塌陷和外邊距重疊的問題 */
.clearfix::before,
.clearfix::after{
content: ‘’;
display: table;
clear: both;
}