A brief introduction to the use of CSS to clear floating clearfix and clear

The following small series for everyone to bring an article on CSS clear floating ( ClearfixAnd Clear) usage. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

This article is mainly about how to use Clearfix and clear in HTML for children's shoes that are just beginning to understand CSS. The style of Clearfix and clear is here I will not write.

Let's talk about the usage of these two classes, first of all we'll look at an example:

<! DOCTYPE html>
We all know that the use of floating will create a lot of unknown problems, through the above example we can find that the height of the class= "demo" is not open by the inside of P, this is because the inside of the p generated floating and out of the document, because the demo itself is not high, so we do not see its gray background. Of course, just give the demo a height, but this is out of the purpose of this article (sometimes we want the height of the outer p to be determined by the content inside).

Since it is the problem of floating, so long as the removal of floating can be, I believe that the experts have a lot of ways to clear the float, such as Overflow:hidden. I'll show you how to clear the float with clearfix and clear.

<! DOCTYPE html>
We found that Clearfix is mainly used in the parent layer of the floating layer, and clear is mainly used between the floating layer and the floating layer, and the floating layer of the same level, if you want to open the height of the parent layer, clear will be placed in the end.

It is difficult to explain which of these two methods is better, only to say specific needs specific treatment.

Related articles:

Deep parse Clearfix Clear float

The use of CSS clearfix in-depth understanding

CSS about Clearfix Clear Floating method

Finishing the most complete CSS clearfix to clear the floating method