How to understand haslaylout and bfc parsing

This article mainly explains "how to understand haslaylout and bfc parsing". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand haslaylout and bfc parsing".

1. Haslaylout and bfc one is unique to ie and the other is standard.

Second, BFC is an isolated and independent container on the page. The child elements in the container will not affect the external elements, and vice versa.

3. Bfc has three functions

1. Contains floating elements

two。 Prevent screenwriters from overlapping

3. Prevent from being overwritten by floating elements

4. Trigger conditions:

The value of float except none

Overflow value other than visible (hidden,auto,scroll)

Display (table-cell,table-caption,inline-block, flex, inline-flex)

The position value is (absolute,fixed)

Fieldset element

It is important to keep in mind that bfc is a separate container, which does not affect other layouts and will not be affected. Using its characteristics, you can solve the problems of clearing floats, 2-column layout and so on.

Example: 2-column adaptive layout

1. Using floating and negative margin to solve the problem

two。 Triggering bfc will not be overwritten by floating elements

Thank you for your reading, the above is the content of "how to understand haslaylout and bfc parsing". After the study of this article, I believe you have a deeper understanding of how to understand haslaylout and bfc parsing, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!