CSS: BFC and IFC

Enjoy 2021-05-03 18:20:46
css bfc ifc


BFC and IFC

Formatting Context

  • Formatting context yes W3C CSS2.1 A concept in the specification . It's a rendered area of the page , And there's a set of rendering rules , It determines how its child elements will be positioned , And the relationship and interaction with other elements . The most common Formatting context Yes Block fomatting context ( abbreviation BFC) and Inline formatting context ( abbreviation IFC).

BFC Concept

  • BFC namely Block Formatting Contexts ( Block level formatting context )
  • have BFC The element of a property can be thought of as an isolated container , The elements inside the container will not affect the elements outside in layout .
  • also BFC It has some features that ordinary containers don't have .

BFC Layout rules

  • Inside Box Will be in the vertical direction , Place one by one .

  • Box The distance in the vertical direction is determined by margin decision . Belong to The same BFC Two adjacent Box Of margin There will be a merger .

  • Each box ( Block box and row box ) Of margin box Left side , And inclusion block border box Contact on the left side of ( For left to right formatting , Otherwise, vice versa ). Even if there is a float .

  • BFC The area of float box overlap .

  • BFC It's a separate container on the page , The child elements inside the container do not affect the elements outside . And vice versa .

  • Calculation BFC Altitude time , Floating elements are also involved in the calculation .

Trigger BFC

  • body Root element
  • Floating elements :float except none Value beyond
  • Absolute positioning elements :position (absolute、fixed)
  • display by inline-block、table-cells、flex、table-caption perhaps inline-flex
  • overflow except visible Value beyond (hidden、auto、scroll)

BFC Characteristics and Application

1. In the same BFC The outer margins of the adjacent boxes below will merge

  • <head>
    div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
    }
    </head>
    <body>
    <div></div>
    <div></div>
    </body>
     Copy code 
  • To avoid outer margin merging, you can put it in different BFC In the container

    • <div class="container">
      <p></p>
      </div>
      <div class="container">
      <p></p>
      </div>
       Copy code 
    • .container {
      overflow: hidden;
      }
      p {
      width: 100px;
      height: 100px;
      background: lightblue;
      margin: 100px;
      }
       Copy code 

2. BFC Can contain floating elements ( Remove the floating )

  • When the parent does not set the height , Floating child elements can cause high collapse , Set... At the parent of the floating element overflow: hidden Trigger the container's BFC, You can wrap floating elements .

3. BFC Can prevent elements from being overwritten by floating elements ( Adaptive two column layout )

  • Two elements of the same level , When one of them floats , It's going to cover a part of another element , But text information is not covered by floating elements .
  • You can add... To the covered elements overflow: hidden, The floating element does not cover the other element , Adaptive two column layout can be realized in this way , The floating element on the left has a fixed width , Right trigger BFC No width is set for the element of , Make its content adaptive width

IFC Concept

  • IFC(inline formatting context): Inline formatting context .·

IFC Layout rules

  • The boxes are placed horizontally one by one , When the container is not wide enough, it will wrap
  • In the horizontal direction , The outer margin of these boxes 、 Frame 、 The space occupied by the inner margin will be calculated , But the inside box is vertical border,padding And margin Will not open the height of the box
  • In the vertical direction , These boxes may be aligned in different forms , It can be done by vertical-align To set up , The default alignment is baseline
  • Each row generates a row box (line box), Including all the boxes in the line , The width of the row box is determined by the containing block and the existing float
  • Generally, the left and right sides of the row box are close to its containing blocks , But because of the floating box (float Elements ) Change with the existence of . The floating box will be between the edge of the containing block and the edge of the row box , In this way, the available width of the row box is less than the width of the containing block .
  • When the total width of all boxes is less than the width of row boxes , So the horizontal layout in the row box is made up of text-align Attribute to determine
  • When the total width of all boxes exceeds one row box , It will form multiple line boxes , Multiple row boxes cannot be separated vertically from each other , It can't overlap
  • When an inner row box exceeds the width of the inner row box , It will be split into boxes , These boxes are distributed in multiple row boxes . If an in line box cannot be split ( For example, only a single character , or word-breaking The mechanism is disabled , Or the inner box of the line is affected by white-space The property value is nowrap or pre Influence ), Then the inner row box will overflow the inner row box
  • When an in line box is split , At the division margins, borders and padding There won't be any visual effects ( Or any other split , As long as there are multiple line boxes )
  • The height of the row box is calculated by the element with the highest actual height among the internal elements . The height of each row box is different due to the content , So the height may be different
  • In a row box , When the height of the inner container it contains is less than the height of the row box , The vertical position of the inner container can be determined by its own vertical-align Attribute to determine

Be careful : stay IFC In the environment of , There can be no block level elements , If you insert a block level element into IFC in , Then this IFC Will be destroyed into BFC, The element or text before the block level element and the element or text after the block level element will each automatically generate an anonymous block box surrounded by .

版权声明
本文为[Enjoy]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503181828233w.html

  1. 浅谈 React 中的 XSS 攻击
  2. XSS attack in react
  3. 自学前端教程整理,附不容错过的前端100篇文章合集
  4. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  5. 使用OpenTracing跟踪Go中的HTTP请求延迟
  6. Using opentracing to track HTTP request latency in go
  7. Encapsulating databinding allows you to write less than 10000 lines of code
  8. 03-HTML5标签-HTML5极速入门
  9. 03-html5 tag-html5 quick start
  10. LayUI - 极易上手拿来即用的前端 UI 框架
  11. Layui - easy to use front end UI framework
  12. Interpretation of lodash source code (1)
  13. Why is the first parameter of node family callback error?
  14. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  15. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  16. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  17. How to set up hyperlinks inside the website?
  18. Using node and socket to realize online chat room
  19. The core competitiveness of Vue: data bidirectional binding
  20. React configuration agent
  21. CSS layout
  22. Application scenario explanation of Vue dynamic component
  23. Redux learning notes 04 -- using multiple reducers to manage data
  24. After three months of typescript writing, what have I learned?
  25. Node family - what is a callback?
  26. React -- a simple implementation of render & create element
  27. JS learning simple usage of jquery
  28. Seamless love
  29. 小白前端入门笔记(12),设置哑链接
  30. Small white front-end entry notes (12), set dumb links
  31. Vue2. X opens composition API and TSX
  32. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  33. Flex learning notes
  34. The most essential closure article in the eastern hemisphere
  35. 2021-05-03 hot news
  36. Sword finger offer -- reverse order pair in array (JS Implementation)
  37. Working process of scaffold
  38. Use decorator mode to strengthen your fetch
  39. [JS] scope (Introduction)
  40. Employment information statistics network (interface document)
  41. Analysis of MVC
  42. [middle stage] please stay and join me in the backstage
  43. Understanding front end garbage collection
  44. [continuous update] front end special style implementation
  45. Flutter product analysis and package reduction scheme
  46. XPath positioning
  47. 前端开发css中的flex布局的使用
  48. The use of flex layout in front end development CSS
  49. JQuery核心函数和静态方法
  50. JQuery core functions and static methods
  51. Node family - understanding of blocking and non blocking
  52. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  53. Vue source code analysis (2) initproxy initialization proxy
  54. What's TM called react diff
  55. Summary of common front end data structure
  56. Useeffect in hooks
  57. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  58. Front end notes: virtual Dom and diff of vue2. X
  59. The best code scanning plug-in of flutter
  60. The simplest plug-in for rights management of flutter