BFC (block formatting context) block level formatting context


The problem solved by BFC?

1. Elements with BFC enabled will not be covered by floating elements
2. If BFC is not enabled, the parent-child outer margins will be merged
3. The element that opens BFC can contain sub elements (solve high collapse)

How to turn on BFC?

1. Float float is not a value of none
2. The value of position is not static or relative
3.display:inline-block table-cell table-caption flex inline-flex
4. Overflow is not visible
            General use overflow:hidden

Each method of opening BFC has its own shortcomings. It can be selected according to the actual situation in the actual work, and avoid the insufficient points when meeting the needs.

Recommended Today

Lua language novice simple tutorial

1、 Foreword Lua is a lightweight and compact scripting language, which is written in standard C language and open in the form of source code. Its design purpose is to be embedded in the application, so as to provide flexible expansion and customization functions for the application. Lua can be applied in game development, independent […]