Understanding of haslaylout and bfc parsing

1. haslayout and bfc are IE-specific and standard attributes.

2. BFC is an isolated independent container on the page. The child elements inside the container will not affect the elements outside, and vice versa.

3. BFC has 3 functions:

1. Contains floating elements,

2. Prevent overlap in screenwriting,

3. Prevent being covered by floating elements

4. Trigger conditions:

float value other than None
overflow values other than visible (hidden, auto, scroll)
display (table-cell, table-caption, inline-block, flex, inline-flex)
The position value is (absolute, fixed)
The fieldset element

It is important to remember that bfc is an independent container that does not affect other layouts and will not be affected. By using its characteristics, you can solve problems such as clearing floats and 2-column layouts.

Example: 2-column adaptive layout

1. Solve it with floating and negative margin

2. Trigger bfc and will not be covered by floating elements

Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

Blog

Understanding of haslaylout and bfc parsing

Detailed analysis and testing of SSD performance issues in MySQL servers

How to implement multiple parameters in el-dropdown in ElementUI

English: A link tag will automatically complete href in IE

Code to display the contents of a txt book on a web page

Vue uses canvas handwriting input to recognize Chinese

Record the process of connecting to the local Linux virtual machine via SSH

Use vertical-align to align input and img

Play with the connect function with timeout in Linux

Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

Implementation of nginx virtual host settings based on domain name, port, and different IP

Recommend

JavaScript object-oriented implementation of magnifying glass case

Solve the problem of failure to mount files or directories using ./ relative path in docker run

CSS code to achieve background gradient and automatic full screen

Use of kubernetes YAML files

Vue implements image dragging and sorting

A more elegant error handling method in JavaScript async await

Detailed tutorial on deploying Jenkins based on docker

Vue network request scheme native network request and js network request library

Solve the problem of OpenLayers 3 loading vector map source

Vue implements the packaging and use of components to control the number of goods

How to configure Hexo and GitHub to bind a custom domain name under Windows 10

MYSQL updatexml() function error injection analysis

JavaScript to show and hide images

CSS injection knowledge summary

N ways to vertically center a div with single/multi-line text (unknown height/fixed height)