Css-floating and clear floating principle (clear floating principle you know)

characteristics of float element a:

1. Out of document Flow
2. Lean to left or right
3. Float elements overlap with block boxes
   • To be exact, a box and a overlap, but the contents of the block will float around a
   • does not overlap with inline elements

    <Divclass= "Parent">        <Divclass= "box"></Div>        <P>Mencius said: "The gentleman has three music, and the king of the world does not have to save Yan." Parents, brother without reason ①, a happy also, Yang worthy of heaven, not proletariate ② in people, two music also, the world of talent and education, three music also.
A gentleman has three music, and the King of the world is not the same as Mencius said: "The gentleman has three music, and the king of the world does not have to save Yan." Parents, brothers without reason ①, a happy also, Yang worthy of heaven, not proletariate ② in people, two music also, the world of talent and education,
Three music also. A gentleman has three music, and the King of the world is not the same as Mencius said: "The gentleman has three music, and the king of the world does not have to save Yan." Parents, brother without reason ①, a joy Also, Yang worthy of heaven, not proletariate ② in people, two music also;
To the World of excellence and education, three music is also. The gentleman has three music, but the king the world does not with the existence Yan</P>        <Divclass= "box"></Div>        <Divclass= "Behind"></Div>        <Divclass= "box"></Div>    </Div>. parent{width:380px;        Background-color:rgb (25, 132, 199);            }. box{width:120px;            height:100px;            Float:left;        Background-color:rgb (25, 199, 185);            }. behind{width:150px;            height:120px;        Background-color:black; }

The figure shows the three major problems caused by floating (1) height collapseThe parent element is not a quilt. Floating elements Open (2) floating elements overlap with block elements (3) text, non-blocky element img Floats around floating elements (This is essentially the second element of overlap, because the elements overlap and the content floats around them) The main solution is divided into three categories: 1. Building BFC Elements 2. Use clear floating properties clear 3. Brute Force Solution1. Building BFC ElementsThe two attributes of the BFC element ①float elements do not overlap with BFC elements ②BFC element calculation height will be calculated on the float element, so BFC can solve the problem of the height collapse and overlap of the elements caused by float.

• Height collapse: Sets the parent element to the BFC element
• Element overlap: Sets the element after the floating element to the BFC element

How to set BFC elements: Display:inline-block, Table-celloverflow:auto, scroll, hiddenfloat:left, Rightposition:absolute, fixed2. Take advantage of clear floating properties clear

A floating element can be added to clear floating empty elements, pseudo-elements, this method is suitable for any problems caused by floating

• <div style= "Clear:both" ></div>
• <BR clear= "All" >
• :: After{content: ""; Display:block; Clear:both;}

It is important to note that when the element overlap is resolved, the BFC solves the result that the element becomes a inline-block element, the float element and the BFC element are on one line, while the clear property is only prohibited when the floating element is near, the float element and the following element are in a column;

There are many ways to solve floating problems, and we need to choose the most suitable method according to different situations.

Css-floating and clear floating principle (clear floating principle you know)