How to Understand float in css

We have been developing some front-end services for a new site to be launched recently. Naturally, the use of CSS is essential. In CSS, float is often used for layout. Float: left or float: right. To put it simply, the former is left floating (non-floating elements float at the front of the left side, if all elements are floating, they will float from left to right according to the stream, and line feed if they cannot fit ), the latter is the right float (float to the right.

 

The above is our initial understanding of the float in CSS. Below I will do some simple research on float.

Pay attention to the following points:

 

1. Floating elements are automatically set to block-level elements, which is equivalent to setting the display: block for the elements (block-level elements can be set to width and height, while intra-row elements cannot ).

2. Non-floating element display issues behind floating elements.

3. Multiple Elements with consistent floating direction are arranged in streaming mode. Pay attention to the height of the floating element.

4. The height of all child elements is adaptive to the floating element.

 

After being defined as float, it will automatically become a block-level element.

Differences between block-level elements and intra-row elements:

To put it simply, block-level elements occupy only one row. You can set the width and height as well as the margins. The element in the row does not occupy only one row, and setting the width and height will not take effect.

Common block-level elements include: h1 ~ H6, p, div, ul, table;

Common in-row elements include span, a, input, and select.

Non-floating element after floating Element

Test code: <div
Shows the result.
The background and border of the div behind the floating div are pressed underneath, but the content is not; and the span is displayed on the floating div as a whole. However, this is not the case in all circumstances. Here, we have to consider the compatibility of the browser, especially in the general situation that tianchao IE6 is still prevalent :)
When the above Code is displayed below IE6: The floating element is not pressed against non-floating
Div, but the span is squashed.
Http://www.cnblogs.com/roucheng/

The height of floating elements in the same direction is inconsistent.

If the height of multiple floating elements in the same direction is different, they may have unexpected results, which is very different from the layout you want.

Multiple floating elements in the Same Direction generally follow the stream layout. If one row is full, the line breaks automatically. The theoretical results are similar:

 

 

 

The above situations are often the expected results.

However, our results are usually as follows:

 

 

Many times, similar accidents may occur inadvertently.

When Elements 7 are arranged, a line can no longer be displayed, so a line break is required. However, the line feed does not start from the line header, but starts from element 5, because element 5 is much higher than element 6.

The height of all sub-elements is self-adaptive to floating elements.

Because the elements float and are out of the Document Stream, the parent element cannot adapt to the elements.

The most common methods for this problem are as follows:

First, add the following after all floating elements:

<Div style = "clear: both; height: 0px;"> </div>

 

 

The second method is to use the omnipotent clear:

. Clearfix: after

{

Visibility: hidden;

Display: block;

Font-size: 0;

Content :".";

Clear: both;

Height: 0;

}

* Html. clearfix

{

Zoom: 1;

}

*: First-child + html. clearfix

{

Zoom: 1;

}

Then add class = "clearfix" to the adaptive element.

 

There are still a lot of convenient information about floating. I will leave it to the next article for details :)