Graphic float attribute details graphic float attribute details

Correct use of the float attribute of CSS may become an arduous task. It involves too much content and has many browser compatibility problems. Its positioning involves not only contained blocks, but also row boxes, block boxes, and in-row boxes.Float descriptive examples of the application attributes of the examples included in this article, as well as some mistakes.

What is "float?

Some elements in CSS are block elements,For example, if you mark two paragraphs as P, they will be placed in two rows ,. Each row occupies one row. If you want to display a row, you can use the inline attribute for the element to display it on the page,

Another effective way to change the surround attribute of page elements is to use float,A typical example is to use float to align the image to the left or right.Below is a simple HTMLCodeImage and paragraph:

 
 <p> lorem ipsum... </P>
 

They are displayed on a new line:

Let's add some CSS code to the image to make it look different:

IMG{Float:Right;Margin:20px;}
 

In this case, we get the right alignment:

If there are more words, the Section will continue to surround the surrounding image:

For example, what we need to doImages and textIndent 20 pixels. How do you write the following code in this way is wrong and will not take effect?:

 
P{Margin:20px;}
 

In this way, this will be correct:For example

 
IMG{Margin:20px;}
 

So why does the indentation of the P section written above not take effect if it is 20 pixels long?To find the answer, let's add a framework code:

 
P{Border:Solid 1px black;}
 

The results may surprise you:

It turns out that after the border is not added (adding or not adding a border here has no effect on them, just to make you understand), the picture is in the paragraph!Therefore, the margin attribute does not work in the first case.To solve this problem, you can use floating: float: left for Section P and set an absolute width: The effect after setting is as follows:

IMG{Float:Right;Margin:20px;}P{Float:Left;Width:220px;Margin:20px;}
 

Strange rule "float"

Now, let's turn to a more complex way to use the "float" rule to transform the float object.It may be necessary to create a thumbnail.For example:

 <  Ul  >    <  Li > <  IMG  SRC  = "Http://placehold.it/100x100&text=1"  /> </  Li  >    <  Li  > <  IMG  SRC  = "Http://placehold.it/100x150&text=2"  /> </  Li  >   <  Li  > <  IMG  SRC  = "Http://placehold.it/100x100&text=3"  /> </  Li  >    <  Li  > <  IMG  SRC  = "Http://placehold.it/100x100&text=4"  /> </ Li  >    <  Li  > <  IMG  SRC  = "Http://placehold.it/100x100&text=5"  /> </  Li  >    <  Li  > <  IMG  SRC = "Http://placehold.it/100x150&text=6"  /> </  Li  >    <  Li  > <  IMG  SRC  = "Http://placehold.it/100x100&text=7"  /> </  Li  >  </  Ul  > 

By default, each Li entry occupies one row.If we put every "float: Left", the image will be lined up with a line break:

 
Li{Float:Left;Margin:4px;}
 

But what if the image is of different heights?

IfListTo add the display attribute of the element, the effect will be better as shown in the figure below

 
1 Li2{3 Display:Inline;4}
 

Now let's align vertically:

IMG{Vertical-align:Top;}
 

Remember that if this is the case where the image is higher, all other images will surround the previous image, for example:

Another example is an element that changes the order. We have a list of items,

 <  Ul  >     <  Li  >   <  IMG  SRC  = "Http://placehold.it/100x100&text=1"  />  </  Li  >     <  Li  >   <  IMG  SRC  = "Http://placehold.it/100x100&text=2 "/  >   </  Li  >     <  Li  >  <  IMG  SRC  = "Http://placehold.it/100x100&text=3"  />   </  Li  >     <  Li  >   <  IMG  SRC  = "Http://placehold.it/100x100&text=4  " />   </  Li  >     <  Li  >   <  IMG  SRC  = "Http://placehold.it/100x100&text=5"  />   </  Li  >     <  Li >   <  IMG  SRC  = "Http://placehold.it/100x100&text = 6"  />   </  Li  >   </  Ul  > 

If we want them to be arranged in reverse order, we only need to use "float: Right:" instead of "float: Left". In HTML, we didn't change the element order as shown in the code above: We use CSS for operations.

With the help of "float", it is convenient to combine projects on the page, but we are faced with a major problem: the following content (text or block) will also change.For example, we have a group of images:

The following text begins to flow and the entire block around it:

To avoid this situation, you must use the "clear" attribute.If we apply it to the second image:

 
Ul Li: Nth-child (2){Clear:Left;}
 

Here we get:

In this case, the remaining Images continue to inherit "float: left ".Correspondingly, text will be distorted:

We need to use clear: both:

 
P{Clear:Both;}
 

Our problem is:

Now, let's imagine,Previous exampleWe need to set the background to the gallery.If the project is not floating, we will have to do this:

Ul{Background:Gray;}
 

However, if we add "float: Left" from the list, the background disappears completely:

If we first set the height to Ul:

 
Ul{Height:300px;}
 

It does not solve the problem because the background size is defined.Class "Clearfix", which will be applied to the ul of the 'div 'element at the same level and will help us.

 
. Clearfix{Clear:Both;}
 

There is another solution that uses "overflow ":

 
Ul{Overflow:Auto;}
 

Float-items of the nine rules:

1. A floating project cannot exceed the edge of its parent container.
2. The left outer border (margin edge) of the left floating box cannot appear on the left of the left boundary of the block. There are similar rules for right floating elements.
3. "If the current box is a left floating box and the left floating box generated earlier exists in the source document, for any of the previous boxes, either the left outer side of the current box appears right of the right outer side of the front box, or its top must be under the bottom of the front box. There are similar rules for the box that floats to the right.
4. The right outer side of the left floating box cannot appear on the right side of any right floating box on the right. Similar rules apply to elements floating to the right..
5. The top edge of the floating box cannot be higher than the block frame or the top of the Floating Box generated by the first element in the source document..
6. The top edge of the floating box cannot be higher than the top of any row box containing a box generated by the first element in the source document..
7. A floating block must be located as high as possible.
8. The left floating box must be positioned as far as possible to the left, and the right floating box must be positioned as far as possible to the right. Select the former between a higher position and a more left or right position...
9. If there is another left floating box on the left of the left floating box, its right outer edge cannot appear on the right of the contained block. (Or the loose requirement is that a left float cannot go beyond the right unless it is arranged to the left as far as possible .) Similar rules apply to elements that float to the right.

It can be seen that floating rules are confusing, but it is not difficult to find out from these rules that the purpose of floating is to avoid overflow of blocks, place it on the top and right as far as possible, but it cannot be higher than the top of the block box, floating box, and row box generated before it.

123

link to this article: graphic details of the float attribute