CSS Details review notes-floating

In addition to being able to change fonts, backgrounds, and all other properties, CSS can also perform basic layout tasks.

Div+css is the most commonly used layout method by applying technology such as floating and positioning, box model, etc.

The basic idea of positioning is simple, which allows you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself.

On the other hand, Css1 raised the float. The float is not exactly a positioning, however, he is certainly not a normal flow layout.

Floating

declaring causes an image to float to the left, while allowing other content (text) to "surround" the image. CSS allows floating of any element, from an image to a paragraph to a list, all elements can float, using the property float implementation.

Therefore, the above code can also write .

Floating elements

For floating elements, there are a few things to remember. First, floating elements are removed from the normal flow of the document in some way, affecting the layout. One element floats, and the other content "wraps around" the element.

Notice that the margins around the floating elements are not merged. If you float an image with an outer margin of 20 pixels, there will be at least 20 pixels of space in this image. If other elements ring with this image and have margins, these margins are not merged with the margins of the floating image.

If you do want to float a non-replacement element, you must declare a width for the element, otherwise the floating paragraph may have only 1 characters justifies.

Do not float

In addition to left and right, the float property has a value. Float:none is used to prevent elements from floating. It may not be considered that if an element does not float, it does not declare float, in fact, to get a normal non-floating element, you must have this value, otherwise all elements will float in some way.

Floating in detail insider

Before delving into the details of the float, first build the concept of the containing block. The containing block of a floating element is the most recent block-level ancestor element. Therefore, in the following markup, the containing block of the floating element is the paragraph element that contains the float:

<H1>Test</H1> <P><imgsrc= "U54.jpg"style= "float:right;border:1px solid #000">This was paragraph text,but you knew. Whthin the content of this paragraph ID a image that ' s been floated. The containing block for the floated image is the paragraph.</P>

In addition, floating elements generate a block-level box, regardless of the element itself, so if a link floats, even if the link itself is an inline element, a inline box is usually generated, but as soon as she floats, a block-level box is generated, and the rule:

1) The left and right boundaries of a floating element cannot exceed the left and right boundaries of its containing block. (although setting a negative margin or floating element is wider than its parent element, it appears outside the parent element.) ）

2) The left and right outer boundary of a floating element must be the (left) boundary of the first floating (or floating) element that appears before the source document, unless the top of the floating element appears below the bottom of the floating element.

Floating content is visible, and you don't have to worry about overlapping a floating element with another floating element. The use of positioning conditions can be completely different and may cause elements to overlap each other.

3) The right edge of the left floating element does not go to the right of the left outer boundary of its right floating element. The left outer boundary of a right floating element does not go to the left of the right outer boundary of its left floating element.

4) The top of a floating element cannot be higher than the top of its parent element. If a floating element is between two merged margins, placing the floating element is like having a block-level parent element between two elements.

This prevents floating paragraphs from moving upward to the top of the parent element that is common to three paragraphs.

5) The top of a floating element cannot be higher than the top of any previously floating element or block-level element.

6) If another element appears before a floating element in the source document, the top of the floating element cannot be higher than the top of any row box that contains the generated box for that element.

7) The left (or right) floating element has another floating element on the left (right), and the former's right outer boundary cannot be on the right (left) edge of its containing block.

8) Floating elements must be placed as high and low as possible.

9) left floating element must be left as far as possible, the right floating element must be to the right as far as possible, the higher the position, the farther it will float to the right or left.

Practical behavior

Insert the left floating picture in paragraph 1:

This looks like the floating element is outside the bottom of the left element, but it is not obvious. The floating rule discussed above deals only with the left and right edges of the Lok Road floating element and its parent element, without involving the lower boundary.

css2.1 clarifies one aspect of the behavior of floating elements: floating elements extend, thus containing all of their descendants floating elements.

Set the left margin of the picture to 10 pixels, adding the background and border of the test title:

This is sure to happen because floating elements are both inside and outside the flow. The contents of the caption are "displayed" by the floating element, but the width of the caption element is equal to the parent element. To avoid capping under a floating element, the content is not displayed from the left edge of its content area.

Clear

You may not always want content to flow through floating elements, and in some cases you might want to deliberately avoid this behavior. In this case, you want to set the first element without a bar to prevent floating elements from appearing next to it. If the first element is likely to be placed next to a float, it pushes down until it appears below the floating element, and all subsequent content appears behind it.

This can be done with the clear property.

Add an attribute to the title "Test" Clear:left

Similar to <br clear = "Left" in HTML > prevents floating elements on the right side of the H3 element, but also pushes H3 across all left floating elements, but also allows floating elements to appear on the H3.

CSS Details review notes-floating