CSS positioning-floating

From: http://www.w3school.com.cn/css/pr_class_float.asp

 

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.

Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

CSS float

When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box:

Next, when box 1 is floating to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view.

If all three boxes are moved to the left, box 1 floats to the left until the contained box is reached, and the other two boxes move to the left until the first floating box is reached.

As shown in, if the box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":

CSS float attributes

In CSS, the float attribute is used to float elements.

For more information about float attributes, visit the Reference Manual: CSS float attributes.

Line box and cleanup

The row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box.

Therefore, creating a floating box allows the text to be centered around the image:

To prevent rows from being moved around the floating box, you must apply the clear attribute to the box. The value of the clear attribute can be left, right, both, or none, which indicates which sides of the box should not be placed in the floating box.

To achieve this effectTop marginAdd enough space to bring the top edge of the element vertically down to the floating box:

This is a useful tool that allows the surrounding elements to leave space for floating elements.

Let's take a closer look at floating and cleaning. Suppose you want an image to float to the left of the text block and want the image and text to be included in another element with the background color and border. You may 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 occurs. Because the floating element is out of the Document Stream, the div surrounding the image and text does not occupy space.

How can we visually enclose floating elements? You need to apply clear somewhere in this element:

Unfortunately, a new problem occurs. Because there is no existing element to be cleaned up, we can only add one empty element and clear it.

.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }.clear {  clear: both;  }<div class="news"><p>some text</p><div class="clear"></div></div>

In this way, we can achieve the desired effect, but we need to add additional code. There are often elements that can apply clear, but sometimes you have to add meaningless labels for layout.

However, another method is to float the container div:

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

This will achieve the expected results. Unfortunately, the next element is affected by this floating element. To solve this problem, some people choose to float everything in the layout, and then use appropriate meaningful elements (often the footer of the site) to clear the float. This helps reduce or remove unnecessary tags.

In fact, all pages on the W3School website use this technology. If you open the CSS file, you will see that we have cleaned up the footer div, the three divs on the footer all float to the left.

 

 

CSS float attributes

 

Definition and usage

The float attribute defines the direction in which the element floats. In the past, this attribute was always applied to the image, so that the text is centered around the image. However, in CSS, any element can float. A floating element generates a block-level box, regardless of its own elements.

If the floating non-replacement element is used, a specific width should be specified; otherwise, they will be as narrow as possible.

Note: if there is only a small amount of space on top of a row for floating elements, this element will jump to the next row, and this process will continue until a row has enough space.

Default Value:	None
Inheritance:	No
Version:	CSS1
JavaScript Syntax:	Object.Style.css Float = "left"

Instance

Float the image to the right:

img  {  float:right;  }

TIY

Browser support

All mainstream browsers support the float attribute.

Note: any version of Internet Explorer (including IE8) does not support the attribute value "inherit ".

Possible Value

Value	Description
Left	The element floats to the left.
Right	The elements float to the right.
None	Default value. The element does not float and is displayed in the position where it appears in the text.
Inherit	Specifies that the value of the float attribute should be inherited from the parent element.