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
Steps to install MySQL using Docker under Linux
As a tester, you may often need to install some s...
mysql gets yesterday's date, today's date, tomorrow's date, and the time of the previous hour and the next hour
1. Current date select DATE_SUB(curdate(),INTERVA...
Sliding menu implemented with CSS3
Result:Implementation code: <!DOCTYPE html>...
Use Docker to build a Git image using the clone repository
Overview I have been using Docker for more than a...
Detailed description of nginx from compilation and installation to configuration file description in Chinese
This article introduces Nginx from compilation an...
How to output Chinese characters in Linux kernel
You can easily input Chinese and get Chinese outp...
How to create users and manage permissions in MySQL
1. How to create a user and password 1. Enter the...
Nginx sample code for implementing dynamic and static separation
In combination with the scenario in this article,...
Why do code standards require SQL statements not to have too many joins?
Free points Interviewer : Have you ever used Linu...
A complete explanation of MySQL high availability architecture: MHA architecture
Table of contents 1. Introduction 2. Composition ...
URL representation in HTML web pages
In HTML, common URLs are represented in a variety ...
CSS tips for implementing Chrome tab bar
This time let’s look at a navigation bar layout w...
Building FastDFS file system in Docker (multi-image tutorial)
Table of contents About FastDFS 1. Search for ima...
Solution to the Multiple primary key defined error in MySQL
There are two ways to create a primary key: creat...
Website Design Experience Summary of Common Mistakes in Website Construction
Reminder: Whether it is planning, designing, or de...