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
JS realizes picture digital clock
This article example shares the specific code of ...
IE8 Developer Tools Menu Explanation
<br />This article has briefly explained the...
The problem and solution of using docker storage and causing Exit to cause files to fail to upload to the server
1. Problem description The storage installed in t...
Solution - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Insufficient permissions
1) Enter the folder path where the jdk file is st...
Share 5 JS high-order functions
Table of contents 1. Introduction 2. Recursion 3....
Docker image creation, uploading, pulling and deployment operations (using Alibaba Cloud)
Since I found that the push image always timed ou...
Thoughts on truncation of multi-line text with a "show more" button
I just happened to encounter this small requireme...
Detailed deployment of Alibaba Cloud Server (graphic tutorial)
I have recently learned web development front-end...
Solve the problem that Docker must use sudo operations
The steps are as follows 1. Create a docker group...
Solve the problem that the service cannot be started when installing the decompressed version of mysql 5.7.18 winx64 on Win7 x64
Today I downloaded mysql-5.7.18-winx64.zip from t...
A few steps to easily build a Windows SSH server
The SSH mentioned here is called Security Shell. ...
Implementation of Vue package size optimization (from 1.72M to 94K)
1. Background I recently made a website, uidea, w...
How to implement mobile web page size adaptation
I finally finished the project at hand, and the m...
In-depth analysis of the Linux kernel macro container_of
1. As mentioned above I saw this macro when I was...
Summary of Mysql table, column, database addition, deletion, modification and query problems
The following is some basic sql knowledge I have ...