Examples of clearfix and clear
|
This article mainly explains how to use clearfix and clear in HTML, for those who are just beginning to understand CSS. I will not write about the styles of clearfix and clear here. Let's talk about the usage of these two classes. First, let's look at an example: Copy code The code is as follows:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>How to use clearfix and clear in HTML</title> <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/> <style type="text/css"> .fl{float:left;} .demo{background:#ccc;} .item1{background:#f90;height:100px;width:100px;} .item2{background:#fc0;height:200px;width:100px;} </style> </head> <body> <div class="demo"> <div class="fl item1"></div> <div class="fl item2"></div> </div> </body> </html> We all know that using floats will cause many unknown problems. From the above example, we can find that the height of class="demo" is not stretched by the div inside. This is because the div inside floats and leaves the document. Because demo itself has no height, we cannot see its gray background. Of course, we can just give demo a height, but that gets away from the purpose of this article (sometimes we want the height of the outer div to be determined by the content inside). Since the problem is caused by floating, all you need to do is clear the floating. I believe experts have many ways to clear floating, such as overflow:hidden. Next I will introduce how to use clearfix and clear to clear floats. Copy code The code is as follows:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>How to use clearfix and clear in HTML</title> <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/> <style type="text/css"> .fl{float:left;} .demo{background:#ccc;} .item1{background:#f90;height:100px;width:100px;} .item2{background:#fc0;height:200px;width:100px;} </style> </head> <body> <h2>Use clear to clear floats</h2> <div class="demo"> <div class="fl item1"></div> <div class="fl item2"></div> <div class="clear"></div> </div> <h2>Clear floats with clearfix</h2> <div class="clearfix demo"> <div class="fl item1"></div> <div class="fl item2"></div> </div> </body> </html> We found that clearfix is mainly used in the parent layer of the floating layer, while clear is mainly used between floating layers and at the same level as the floating layer. If you want to expand the height of the parent layer, clear should be placed last. It is difficult to say which of these two methods is better. We can only say that specific needs should be met. Some people may ask, why does writing the clearfix style like this clear the float? What do these styles mean? This requires students to have a certain understanding of CSS pseudo-classes |
<<: Tutorial on using the hyperlink tag in HTML
>>: SystemC environment configuration method under Linux system
Recommend
Solution to the problem that elements with negative z-index cannot be clicked
I was working on a pop-up ad recently. Since the d...
80 lines of code to write a Webpack plugin and publish it to npm
1. Introduction I have been studying the principl...
MySQL 8.0.18 stable version released! Hash Join is here as expected
MySQL 8.0.18 stable version (GA) was officially r...
Vue implements tab label (label exceeds automatic scrolling)
When the created tab label exceeds the visible ar...
Perfect solution for JavaScript front-end timeout asynchronous operation
Table of contents What happens if a piece of code...
A brief discussion on Linux virtual memory
Table of contents origin Virtual Memory Paging an...
Tutorial on how to modify element.style inline styles
Preface When we were writing the web page style a...
How to implement the association between frame windows and the use of the target attribute of hyperlinks
To achieve the association of the frame window, th...
The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands
What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...
Practical operation of using any font in a web page with demonstration
I have done some research on "embedding non-...
How to configure wordpress with nginx
Before, I had built WordPress myself, but at that...
Vue Element-ui implements tree control node adding icon detailed explanation
Table of contents 1. Rendering 2. Bind data and a...
JavaScript modularity explained
Table of contents Preface: 1. Concept 2. The bene...
Example of exporting and importing Docker containers
Table of contents Exporting Docker containers Imp...
How to change the CentOS server time to Beijing time
1. I purchased a VPS and CentOS system, and found...