通過浮動，可以使乙個元素向其父元素的左側或右側移動，使用 float 屬性來設定元素的浮動
可選值：
注意：
未設定浮動
設定浮動
浮動的特點：
浮動元素會完全脫離文件流，不再佔據文件流中的位置
設定浮動以後元素會向父元素的左側或右側移動
浮動元素預設不會從父元素中移出
浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素如果浮動元素的上邊是乙個沒有浮動的塊元素，則浮動元素無法上移浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
簡單總結：
浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列， 通過浮動可以製作一些水平方向的布局
**：
加了浮動效果
元素設定浮動以後，將會從文件流中脫離，從文件流中脫離後，元素的一些特點也會發生變化
脫離文件流的特點：
塊元素：
塊元素不在獨佔頁面的一行
脫離文件流以後，塊元素的寬度和高度預設都被內容撐開
行內元素：
行內元素脫離文件流以後會變成塊元素，特點和塊元素一樣
脫離文件流以後，不需要再區分塊和行內了
在浮動布局中，父元素的高度預設是被子元素撐開的，當子元素浮動後，其會完全脫離文件流，子元素從文件流中脫離，將會無法撐起父元素的高度，導致父元素的高度丟失，父元素高度丟失以後，其下的元素會自動上移，導致頁面的布局混亂，所以高度塌陷是浮動布局中比較常見的乙個問題，這個問題我們必須要進行處理！
方法一
直接設定父元素的高度，必須要知道父元素高度是多少
方法二
在父元素中，追加空子元素，並設定其clear屬性為both，clear是css中專用於清除浮動的屬性
clear 取值：
1、none：預設值，不做任何清除浮動的操作
2、left：清除前面元素左浮動帶來的影響
3、right：清除前面元素右浮動帶來的影響
4、both：清除前面元素所有浮動帶來的影響
方法三
設定父元素浮動
方法四
為父元素設定overflow屬性，取值：hidden 或 auto
方法五
父元素設定display:table
方法六
使用after偽類解決高度塌陷
.box1::after.clearfix::before,
.clearfix::after
CSS 浮動和高度塌陷
溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直距離不是margin bottom與ma...
css的BFC高度塌陷和居中
一 css外邊距重疊的解決方法 兩個或多個塊級盒子的垂直相鄰邊界會重合。1 兄弟級 當乙個元素出現在另乙個元素上面，也就是兩個垂直外邊距相遇時 只有垂直的才會發生 1.調高margin 2.padding 父子級元素 當乙個元素包含在另乙個元素中時，如果外面大的那個元素沒有內邊距或者邊框，那麼這兩個...
高度塌陷與 BFC
在浮動布局中，父元素的高度預設是被子元素撐開的 當子元素浮動後，其會完全脫離文件流，子元素從文件流中脫離將會無法撐起父元素的高度，導致父元素的高度丟失 父元素高度丟失以後，其下的元素會自動上移，導致頁面的布局混亂 clear作用 清除浮動元素對當前元素所產生的影響 本質是為元素新增乙個margin ...