CSS Float Detailed

Reproduced from: http://blog.163.com/wangming_cn/blog/static/1464109320096611441538/

First of all, we learned that the principle of CSS page layout, is in accordance with the order of the object declaration in the HTML code, the flow layout to display it, and the flow layout has to say float floating technology. All objects in HTML are divided into two types: block element, An inline element (inline element), although a mutable element is also present, it is only determined that the element is a block element or inline element with the context relationship.

In fact, the function of the float property of CSS is to change the default display mode of block element object. Once the Block object has a float property set, it will no longer occupy one row on its own. Can be floated to the left or right.

a floating box can move to the left or right until its outer edge touches a border that contains a box or another floating box. Because the floating box is not in the normal flow of the document, the Block box in the normal stream of the document behaves like a floating box does not exist.

Looking at the figure below, when you float the box 1 to the right, it moves away from the document stream and shifts to the right until its right edge touches the right edge of the containing box:

Look at the figure below, and when box 1 floats to the left, it moves away from the document stream and shifts to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document stream, it does not occupy space, actually covering box 2, so that box 2 disappears from view.

If you move all three boxes to the left, box 1 floats to the left until you hit the Include box, and the other two boxes float to the left until you hit the previous floating box.

As the following illustration shows, if the containing box is too narrow to accommodate three floating elements that are horizontally arranged, the other floating blocks move downward until there is enough space. If floating elements are different in height, they may be "jammed" by other floating elements when they move down:

--------------------------------------------------------------------------------------------------------------- ---------------

Row boxes and cleanup

The line box next to the floating box is shortened to allow space for the floating box, and the row box surrounds the floating box.

Therefore, creating a floating box allows text to surround the image:

To prevent a row box from surrounding a floating box, you need to apply the clear property to the box. The clear property's value can be left, right, both, or none, which indicates which edges of the box should not be next to the floating box.

To achieve this effect, add enough space on the top margin of the cleaned element to drop the topmost edge of the element vertically below the floating box:

This is a useful tool that lets the surrounding elements make room for floating elements.

Let's look at floating and cleaning in more detail. Suppose you want a picture to float to the left of the text block, and you want the picture and text to be included in another element with a background color and a border. You might write the following code:

. News {Background-color:gray border:solid 1px black;}. News img {Float:left}. News p {float:right;} <div class= "News" ><p>some text</p></div>

In this case, a problem arises. Because the floating element is out of the document Stream, the div that surrounds the picture and text does not occupy space.

How to let the surrounding elements visually surround the floating elements. You need to apply clear somewhere in this element:

Unfortunately there is a new problem, because there are no existing elements that can be applied to cleanup, so we can only add an empty element and clean it up.

. News {Background-color:gray border:solid 1px black;}. News img {float:right}. News p {float:right;}

. clear {Clear:both;}

<div class= "News" ><p>some text</p>

<div class= "Clear" ></div>

</div>

This will achieve what we want, but we need to add extra code. There are often elements that can apply clear, but sometimes you have to add meaningless tags for layout purposes.

But there's another way to do that is to float the container div:

. news {Background-color:gray; border:solid 1px black;

Float:left;

}.news img {float:right}. News p {float:right;} <div class= "News" ><p>some text</p></div>

This will get the effect we want. Unfortunately, the next element will be affected by this floating element. To solve this problem, some people choose to float everything in the layout and then clean up the floats with the appropriate meaningful elements (often the footer of the site). This helps to reduce or eliminate unnecessary markup.

In fact, all pages on the W3school site use this technique, and if you open our CSS file, you'll see that we cleaned up the footer Div, and the three div above the footer floats to the left.