浮動簡介
通過浮動可以使一個元素向其父元素的左側或右側移動
使用 float 屬性來設定元素的浮動
- none 默認值，元素不浮動
- left 元素向左浮動
- right 元素向右浮動
注意：元素設定浮動后，水平布局的等式便不需要強制成立
元素設定浮動以后，會完全從檔案流中脫離，不在占用檔案流中的位置
所以元素下面的還在檔案流中的元素會自動向上移動
浮動的特點：
- 浮動元素會完全脫離檔案流，不在占用檔案流中的文職
- 設定浮動以后元素會向父元素的左側或右側移動，
- 浮動元素默認不會從父元素中移出
- 浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素
- 如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移
- 浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
簡單總結：
? 浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，通過浮動可以制作一些水平方向的布局
浮動的其他特點
浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以利用浮動來設定文字環繞圖片的效果
注：最開始 float 屬性就用于圖片的環繞功能，后來發現能用于布局的
元素設定浮動以后，將會從檔案流中脫離，從檔案流中脫離后，元素的一些特點也會發生變化
脫離檔案流的特點：
塊元素：
- 塊元素不在獨占頁面的一行
- 脫離檔案流以后，塊元素的寬度和高度默認都被內容撐開
行內元素：
- 行內元素脫離檔案流以后會變成塊元素，特點和塊元素一樣
- 脫離檔案流以后，不需要再區分塊和行內了
高度塌陷
高度塌陷的問題：
在浮動布局中，父元素的高度默認是被子元素撐開的，當子元素浮動后，其會完全脫離檔案流，子元素從檔案流中脫離，將會無法撐起父元素的高度，導致父元素的高度丟失
父元素高度丟失以后，其下的元素會自動上移，導致頁面的布局混亂
所以高度塌陷是浮動布局中比較常見的一個問題，這個問題我們必須要進行處理！
BFC
BFC(Block Formatting Context) 塊級格式化環境
BFC是一個CSS中一個隱含的屬性，可以通過一些方式打開一個元素的BFC
開啟BFC，該元素會變成一個獨立的布局區域
元素開啟BFC后的特點：
- 開啟BFC的元素不會被浮動元素所覆寫
- 開啟BFC的元素子元素和父元素外邊距不會重疊
- 開啟BFC的元素可以包含浮動的子元素（被撐開，解決高度塌陷問題）
可以通過一些特殊方式來開啟元素的BFC：
-
設定(父)元素的浮動（高度是撐開了，但脫離了檔案流，會影響布局，除非配合 clear）（不推薦）
-
將元素設定為行內塊元素（高度和布局是好了，但寬度收縮成子元素的）（不推薦）
-
將元素的overflow設定為一個非visible的值（副作用小，常用）
還有其他一些方式，比如 position flex 啊之類的...
所以一般常用的方式：為元素設定 overflow: hidden; 開啟其BFC 以使其可以包含浮動元素
效果如下：
方式1
方式2
方式3
clear
如果我們不希望某個元素因為其他元素浮動的影響而改變位置，可以通過clear屬性來清除浮動元素對當前元素所產生的影響
clear
作用：清除浮動元素對當前元素所產生的影響
可選值：
- left 清除左側浮動元素對當前元素的影響
- right 清除右側浮動元素對當前元素的影響
- both 清除兩側中最大影響的那側
原理：
設定清除浮動以后，瀏覽器會自動為元素添加一個上外邊距，以使其位置不受其他元素的影響
.clearfix
.clearfix:: before,
.clearfix:: after{
content: '';
display: table;
clear: both;
}
/* 出自《CSS權威指南》 */
clearfix 這個樣式可以同時解決高度塌陷和外邊距重疊的問題，當你在遇到這些問題時，直接使用clearfix這個類即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/235370.html
標籤：Html/Css