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

HTML table tag tutorial (21): row border color attribute BORDERCOLOR

Examples of clearfix and clear

HTML table tag tutorial (21): row border color attribute BORDERCOLOR

Summary of new usage examples of computed in Vue3

Two usages of iFrame tags in HTML

HTML realizes hotel screening function through form

Hadoop 2.x vs 3.x 22-point comparison, Hadoop 3.x improvements over 2.x

HTML table tag tutorial (3): width and height attributes WIDTH, HEIGHT

Example of how to embed H5 in WeChat applet webView

Detailed explanation of Vue event handling and event modifiers

MySQL conditional query and or usage and priority example analysis

Detailed explanation of the interaction between React Native and IOS

Recommend

Several ways to switch between Vue Tab and cache pages

MySQL 8.0.13 installation and configuration method graphic tutorial

Apache Bench stress testing tool implementation principle and usage analysis

Solution to CSS anchor positioning being blocked by the top fixed navigation bar

Common interview questions and answers for web designer positions

JavaScript plugin encapsulation for table switching

Detailed explanation of the TARGET attribute of the HTML hyperlink tag A

MySQL5.7.27-winx64 version win10 download and installation tutorial diagram

A brief discussion on Yahoo's 35 rules for front-end optimization

Detailed explanation of Docker's most commonly used image commands and container commands

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

Detailed explanation of Docker container network port configuration process

Summary of several submission methods of HTML forms

Detailed explanation of how to solve the position:fixed fixed positioning offset problem

Using CSS3's 3D effects to create a cube