CSS: Flow layout
date
Apr 30, 2024
slug
css-flow-layout
status
Published
tags
CSS
Frontend
summary
type
Post
BFC & IFC
BFC 和 IFC 分別是 Block Formatting Context 和 Inline Formatting Context。前者會由上到下排列，後者是由左至右。
值得一提的是 IFC 上使用 margin 使用影響左右，而垂直方向的 padding / border 雖然能生效，但並不會改變排版。
Inner & Outer Display Type
決定本身和子元素如何佈局
Out of Flow
使用到
- float
position: absolute和position: fixed
會產生新的 BFC，其內部的 children 也都不會受原本外部的 Layout 影響
display: flow-root
可以刻意用來開一層新的 BFC