CSS layout Float "4"

Basic knowledge of some floating models: The floating model is also a visual format model, and the floating box can move left and right (depending on the value of the float property) until its outer edge touches the edge of the box that contains the box or another floating element. The floating element is not in the normal flow of the document, and the elements in the normal flow of the document behave as if the floating element does not exist. The author of CSS Mastery is very interesting in drawing several graphs that can help us understand the performance of floats.

Non-floating <div style= "Border:solid 5px #0e0; width:300px; " >  <div style= "height:100px; width:100px; "> </div>  <div style=" height:100px; width:100px;  " > </div>  <div style= "height:100px; width:100px; "> </div> </div>

Red to right floating <div style= "Border:solid 5px #0e0; width:300px; " > <div style= "height:100px; width:100px;  Float:right; " > </div> <div style= "height:100px; width:100px;  " > </div> <div style= "height:100px; width:100px; "> </div> </div>

Red frame left shift, cover green box  <div style= "Border:solid 5px #0e0; width:300px;" >  <div style= "height:100px; width:100px;   Float:left; " > </div> <div style= "height:100px; width:100px; "> </div>  <div style=" height:100px; width:100px; "> </div>  </div>

are floating to the left, with a parent element width of 0 <div style= "border:solid 5px #0e0; width:300px; " >  <div style= "height:100px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div>  </div>

If the containing block is too narrow to accommodate three floating elements in a horizontal arrangement, then the other floating blocks move downward, until there are enough deductions, and if the height of the floating element is different, the lower move may be stuck

Not enough horizontal space <div style= "Border:solid 5px #0e0; width:250px; " >  <div style= "height:100px; width:100px;   Float:left; " > </div> <div style= "height:100px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div>  </div>

Stuck with <div style= "Border:solid 5px #0e0; width:250px; " >  <div style= "height:120px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div>  </div>

Line boxes and cleanup

The preceding point indicates that the float will leave the element out of the document flow without affecting the non-floating element. Not really, if there is a document flow element behind the floating element, then the box of the element will behave as if the floating element does not exist, but the text content of the box will be affected by the floating element. Move to make room. In terms of the term, the line box next to the floating element is shortened so that the floating element flows out of space, so the row box surrounds the float box.

Non-floating  <div style= "Border:solid 5px #0e0; width:250px;" > <div style= "height:50px; width:50px; "></div> <div style=" height:100px; width:100px; "> 11111111111 11111111111 </div>  </div>

Floating  <div style= "Border:solid 5px #0e0; width:250px;" >  <div style= "height:50px; width:50px;  Float:left; " ></div> <div style= "height:100px; width:100px; "> 11111111111           11111111111 </div>  </div>

It can be seen that although the Green div layout is not affected by the floating, the normal layout, but the text part is squeezed into the red floating div below. To prevent the line box from wrapping around a floating element, you can use the Clear property, which left,right,both,none the property to indicate which sides of the box are not next to the floating box.

<div style= "Border:solid 5px #0e0; width:250px; " > <div style= "height:50px; width:50px;  Float:left; " ></div> <div style= "height:100px; width:100px;  Clear:both; " > 11111111111   11111111111 </div>  </div>                     

The element cleanup actually leaves the vertical space for the preceding floating element, which solves one of our previous problems, when we find that all the elements inside the div are floating without occupying the document space, so that the parent element, the height is 0, and many effects are missing. So at this point we can use the clear property to clear the float to achieve our desired effect.

All floats to the left, the parent element width is 0  <div style= "Border:solid 5px #0e0; width:300px;" >  <div style= "height:100px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div> <div style= "height:100px; width:100px;   Float:left; " > </div>  </div>

If we want the parent element to visually surround the floating element, it can be handled as follows

Add an empty div at the end, clean it up

<div style= "Border:solid 5px #0e0; width:300px; " > <div style= "height:100px; width:100px;   Float:left; " > </div> <div style= "height:100px; width:100px;   Float:left; " > </div>  <div style= "height:100px; width:100px;   Float:left; " > </div> <div style= "Clear:both;" ></div>  </div>

Of course, there are many shortcomings, some JavaScript can also make similar effects, here is not in detail, it is worth noting that the application of the value of hidden or auto overflow property has a side effect: automatically clean up any contained floating elements, so that when the page has a related problem, You can see if this property is a ghost.

In this way, with these basic knowledge, we apply CSS when we can solve a lot of the previously very baffled problem.

CSS layout Float "4"