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 |
<<: Implementation of CSS text shadow gradually blurring effect
>>: HTML Editing Basics (A Must-Read for Newbies)
Recommend
Three ways to configure Nginx virtual hosts (based on domain names)
Nginx supports three ways to configure virtual ho...
How to understand SELinux under Linux
Table of contents 1. Introduction to SELinux 2. B...
Implementation of two-way binding of parent-child component data in front-end framework Vue
Table of contents 1. One-way value transfer betwe...
17 404 Pages You'll Want to Experience
How can we say that we should avoid 404? The reas...
Several ways to remove the dotted box that appears when clicking a link
Here are a few ways to remove it: Add the link dir...
JavaScript function call, apply and bind method case study
Summarize 1. Similarities Both can change the int...
About the problem of dynamic splicing src image address of img in Vue
Let's take a look at the dynamic splicing of ...
Docker containers communicate directly through routing to achieve network communication
Overview As for the current default network of Do...
Solution to the error reported by Mysql systemctl start mysqld
Error message: Job for mysqld.service failed beca...
JavaScript canvas implements graphics and text with shadows
Use canvas to create graphics and text with shado...
Tomcat multi-port domain name access and configuration to enable gzip compression method
1. In addition to the default port 8080, we try t...
Teach you how to deploy zabbix service on saltstack
Table of contents Saltstack deploys zabbix servic...
Solve the problem that Navicat cannot connect to the MySQL server in the Centos system in VMware
Solution to Host 'xxxx' is not allowed to...
The failure to play flv/MP4 and other video files on the website is related to the MIME type.
When making a website, I found that video files, s...
How to use Antd's Form component in React to implement form functions
1. Construction components 1. A form must contain...