How to clear floating in HTML

In HTML, floating can be said to be more commonly used. He has a great role to play in the layout of the page, but there are also many problems in floating. Now let's just say a little bit about how to remove floating

First, let's take a quick look at the float:

First we create a simple div and put two more div in it, and give them different styles.

CSS style code:

   #div1 {background:medium purple;}   #left {width:200px;height:100px;background:sky-blue;}   #right {width:250px;height:150px;background:pink;}

HTML code:

<div id= "Div1" ><div id= "left" ></div><div id= "right" ></div></div>

：

This is the beginning of our initial structure and style, and now we give the top left Blue Div a left float (float.left) to see what changes.

CSS code:

#left {width:200px;height:100px;background:skyblue;float:left;}

：

In this case, you can see that the pink div runs below the Blue Div, and the width of the purple div becomes the same width as the pink div, so that it will not occupy the document stream long after the element floats. Its width is not defined in the case, the content of its own open. At this point we're giving the pink div a left float to see what's changed.

CSS code:

#right {width:250px;height:150px;background:pink;float:left;}

：

You will find that the purple Div has completely disappeared. The blue div and the pink Div appear on the same line. So the default is to appear on the same line after the element has been floated, and the position of the floating element is either to the parent's boundary or it encounters another floating element to stop. Many will ask, we do not want to let the purple div disappear what to do? This is what we are going to say today about the removal of floating methods.

Method One: (to the parent element width and height)

Since floating elements do not occupy the flow of documents, it is said that the purple div disappears because there is no content to open the height, and it does not exist. So one of the ways we give the purple div height and width is to give the height and width of the floating element's parent, so that it can open its own width and height to display.

CSS code:

   #div1 {width:600px;height:300px;background:medium purple;}   #left {width:200px;height:100px;background:sky-blue;}   #right {width:250px;height:150px;background:pink;}

：

Method Two: Parent element plus Overflow:hidden

Many people will say that we don't want to give the purple div a fixed width, and want its content to open up. Then we can add Overflow:hidden to the CSS of the parent element, which is also the purple Div. So that the purple Div shows up.

CSS code:

#div1 {Background:medium Purple;overflow:hidden}

：

Method Three: Add a clear:both to the sibling element

In addition to changing the parent, we can also change the sibling element of the child element to achieve the effect of removing the float.

HTML code:

<div id= "Div1" ><div id= "left" ></div><div id= "right" ></div><div id= "Div2" ></ Div></div>  

：

Method four: Using Pseudo-class to remove floating

Use pseudo-class to clear the float can be before or after, and add content: "" can add contents can not add, but must add display:block, but also write Clear:both;

CSS code:

#div1: after{content: ""; clear:both;display:block;}

：

These are some ways to clear the float, hope to help everyone.

How to clear floating in HTML