>[danger] 什么是FC? --- > w3c規定的一個概念, 決定元素如何放置, 以及和其他元素的一些關系和相互作用 --- | 名字 | 全稱 | 解釋 | | --- | --- | --- | | FC | Formatting Context | 格式化上下文 | | BFC | Block Formatting Context | 塊級格式化上下文 | | IFC | Inline Formatting Context | 行內格式化上下文 | | GFC | GridLayout Formatting Context | 網格布局格式化上下文 | | FFC | Flex Formatting Context | 自適應格式化上下文 | >[danger]BFC --- 塊格式化上下文, 是塊級盒布局出現的區域, 也是浮動層元素進行交互的區域。一個獨立的布局區域 1. 問題: 子元素浮動, 父級高度塌陷(無法被撐開, 子元素脫離文檔流)  2. 問題: 相鄰div, 其中一個浮動了, 擋住了后面div, 想劃清界限  解決: 用BFC包住浮動元素 (觸發BFC方式) * 父級float 不為none 的任何值 * 父級position 為 absolute / fixed * 父級overflow 不為 visible 的任何值 (hidden常用) * 父級display 為 inline-block / table-cell / table-caption / flow-root(無副作用) >[danger]IFC --- 1. 規則: 左右margin撐開，上下margin并未撐開，符合IFC規范 只計算橫向樣式空間，不計算縱向樣式空間  2. 規則: IFC規定, 內容是行內元素, 水平排列由塊級的, text-align決定  3. 規則: float元素, 優先排列, 段落開頭的大字很有用  ~~~ <style> .warp { border: 1px solid red; width: 200px; } .f-l { float: left; font-size: 25px;} </style> <div class="warp"> 我是一個很好看的內容 <span class="f-l">哇</span> 我是一個很好看的內容 我是一個很好看的內容 我是一個很好看的內容 </div> ~~~ >[danger]GFC ---- 概念: * 網格布局, 并非表格布局, 網格有著比表格更豐富的css屬性, 靈活的控制 * 可以定義網格的行和列, 變成了二維布局 觸發條件: * 設置display: grid; 得到一個獨立渲染區域, 網格布局 [屬性詳解]([https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS\_Grid\_Layout/Basic\_Concepts\_of\_Grid\_Layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)) --- >[danger]FFC --- 觸發條件: * 設置display: flex; / display: inline-flex; 得到獨立渲染區域, 彈性格式上下文環境(FFC) 規則: * display: flex; 標簽為塊級元素 * display: inline-flex; 標簽為行塊級元素 * 子標簽們都是彈性項目 [屬性講解flex]([https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex)) [排列方式align/justify]([https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content))