1. 程式人生 > >2018.09.24 學習筆記 // 前端CSS // 浮動與BFC

2018.09.24 學習筆記 // 前端CSS // 浮動與BFC

1.什麼是浮動?為什麼要清除?

脫離文件流

  • 空間被後面的人佔用
  • 不排隊的人也得排自己的隊
  • 全部浮動,實現橫向排列
  • 父元素沒有了高度(會影響後面的元素),所以要清除。

2.如何“清楚浮動”/“閉合浮動”?

1.overflow:hiddin 2.給父級新增偽元素選擇器

觸發了BFC

1. 什麼是BFC

BFC:“塊級格式化上下文”,一個環境中的元素不會影響其他環境中的佈局。比如浮動元素會形成BFC,浮動元素內部子元素主要受該浮動元素影響,兩個浮動元素之間是相互不影響的。BFC仍然屬於文件流。

2. 如何產生BFC

  • a)float的值不為none
  • b) overflow的值不為visible
  • c) display的值為table-cell table-caption inline-block 中的任何一個
  • d) position的值不為relative和static

css3 觸發bfc方式可以簡單描述為 在元素定位非 static relative 的情況下觸發 float也是一種定位方式