What is BFC? How to clear floats using CSS pseudo elements
|
BFC Concept: The block formatting context is an independent rendering area that isolates the elements inside the BFC from the elements outside it, so that the positioning of the internal and external elements will not affect each other. Let us first understand a term: BFC (block formatting context), which means "block-level formatting context" in Chinese. First remember a principle: If an element has a BFC, then no matter how the internal elements change, it will not affect the external elements. Therefore, it is impossible for BFC elements to have margin overlap, because margin overlap will affect the elements outside; BFC elements can also be used to clear the impact of floating, because if it is not cleared, the floating of child elements will cause the height of the parent element to collapse, which will inevitably affect the layout and positioning of the subsequent elements, which is obviously contrary to the setting that the child elements of the BFC element will not affect the external elements. The following situations trigger the BFC: • <html> root element Obviously, when we set the overflow value to hidden and make the container element have BFC, the floating of the child element child will not cause the height collapse of the parent element. Use pseudo-class elements to clear floating:
.clearFix::after, .clearFix::before {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.clearFix { zoom: 1;}Summarize The above is the CSS method of using pseudo-elements to clear floating that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time! |
<<: Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP
>>: Web Design Experience: Self-righteous Web Designers
Recommend
Implementation steps for building multi-page programs using Webpack
It is very common to use webpack to build single-...
This article will help you thoroughly understand the specific use of cgroup in Docker
Table of contents What is cgroup Composition of c...
Detailed explanation of Vue save automatic formatting line break
I searched for many ways to change it online but ...
Steps to set up and mount shared folders on Windows host and Docker container
Programs in Docker containers often need to acces...
Several implementation methods of the tab bar (recommended)
Tabs: Category + Description Tag bar: Category =&...
Detailed explanation of MySQL basic operations (Part 2)
Preface This article contains 1. Several major co...
Using HTML web page examples to explain the meaning of the head area code
Use examples to familiarize yourself with the mean...
Detailed steps to install 64-bit Ubuntu system and Docker tool on Raspberry Pi 3B+
If you want to install some 64-bit applications (...
Detailed steps to download Tomcat and put it on Linux
If you have just come into contact with Linux, th...
How to migrate sqlite to mysql script
Without further ado, I will post the code for you...
Create a movable stack widget function using flutter
This post focuses on a super secret Flutter proje...
Linux hardware configuration command example
Hardware View Commands system # uname -a # View k...
Detailed explanation of cocoscreater prefab
Table of contents Prefab How to create a prefab T...
How to install setup.py program in linux
First execute the command: [root@mini61 setuptool...
How to install docker and portainer in kali
With the emergence of docker, many services have ...