[CSS] float, css float

[CSS] float, css float
How elements float

The horizontal movement of elements means that the elements can only move left and right, but cannot move up or down.

A floating element moves left or right as much as possible until its outer edge hits the border of the contained box or another floating box.

The element after the floating element will surround it.

Elements before floating elements are not affected.

 

Body

Floating is a state that is semi-detached from the document stream. It is not as completely detached from the document stream as it is definitely positioned.

Absolute positioning:

<Div id = "div1" style = "position: relative; width: 200px; background-color: red">
<Div id = "div2" style = "position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: blue "> </div>
<Div>

　　

In this case, div1 does not set the height. Although div2 sets the height of 100px, div2 does not support the height of div1, because it is absolutely positioned completely out of the Document Stream, div1 is completely unaware of div2;

 

Floating: first case

<Div id = "div1" style = "margin: 20px 0; width: 200px; background-color: red">
<Div id = "div2" style = "float: left; width: 100px; height: 100px; background-color: blue"> </div>
</Div>

　　

We have set a left-facing float in div2. If you have not cleared the effects of div2 float in div1, you cannot open the div1 height because div1 cannot feel the float.

But after you clear the float, div1 will be able to feel the existence of the float (equivalent to floating in the Document Stream), and the height will be lifted.

There are two solutions

　　

　　

 

Floating: Case 2

<P> neurology </p>
<Div id = "div2" style = "float: left; width: 100px; height: 100px; background-color: red;"> </div>

　　

Because floating (div2) can feel the <p> here, how to display it is displayed; that isElements before floating elements are not affected.

　　

 

Floating: Case 3

<Div id = "div2" style = "float: left; width: 100px; height: 100px; border: 3px solid # F00"> </div>
<P style = "background-color: blue";> neurology </p>

　　

<P> the existence of the floating (div2) is invisible, so <p> it is covered by the floating, but not completely covered.

We can find that the <p> background is indeed overwritten, but the <p> text content is not overwritten, this is also a strange floating point-floating does not overwrite the text in the Document Stream, but other attributes will overwrite.

Solution

Set <p> A clear: left; to clear the influence of floating, so that <p> can feel the presence of div2.

<Div id = "div2" style = "float: left; width: 100px; height: 100px; border: 3px solid # F00"> </div>
<P style = "clear: left; background-color: blue";> neurology </p>