css details review notes--floating_html/css_WEB-ITnose

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

div css is the most commonly used layout method through floating and positioning, box model and other technical applications.

The basic idea of ​​positioning is simple, it allows defining where an element box should appear relative to its normal position, or relative to a parent element, another element or even the browser window itself.

On the other hand, css1 proposes floats. Floating is not exactly positioning, but it is certainly not a normal flow layout.

floating

Declaring will cause an image to float to the right , allowing other content (text) to "surround" the image. CSS allows any element to be floated, from images to paragraphs to lists, all elements can be floated using the float attribute.

Therefore, the above code can also be written as .

Floated Elements

There are a few things to keep in mind when it comes to floating elements. First, the floated element is removed from the normal flow of the document in some way, affecting the layout. When an element is floated, other content "wraps" around it.

Note that margins around floated elements are not merged. If you float an image with a 20 pixel margin, there will be at least 20 pixels of space in the image. If other elements ring this image, and they all have margins, then those margins won't merge with the floating image's margins.

If you do float a non-replaced element, you must declare a width for the element, otherwise the floated paragraph might be only 1 character wide.

Not floating

In addition to left and right, the float attribute has a value. float:none is used to prevent elements from floating. You may not think that if you want an element to be non-floating, you should 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.

The detailed lowdown on floats

Before we dive into the details of floats, we first need to establish the concept of containing blocks. The containing block of a floated element is the nearest block-level ancestor. Therefore, in the following markup, the containing block of a floated element is the paragraph element that contains the float:

<h1>Test</h1> <p><img src ="U54.jpg" style ="float:right;border:1px solid #000"> This is paragraph text,but you knew that. Whthin the content of this paragraph id an image that's been floated.The containing block for the floated image is the paragraph. </p>

Additionally, a floated element generates a block-level box regardless of the element itself, so if you float a link, even if the link itself is an inline element, it will usually generate an inline box, but as long as it is floated, it will generate a block-level box. Rules:

1 ) The left and right boundaries of a floated element cannot exceed the left and right inner boundaries of its containing block. (Although setting negative margins or a floated element wider than its parent element will make it appear outside the parent element.)

2) The left and right outer boundaries of the floated element must be the left and right edges that previously appeared in the source document. Floated (or right-floated) elements have a (left) border unless the top of a later-occurring floated element is below the bottom of an earlier-occurring floated element.

Floating content is all visible, there is no need to worry about one floating element overlapping another floating element. The situation is completely different when using positioning, which may cause elements to cover each other.

3) The right border of a left-floated element will not be to the right of the left outer border of its right-floated element. The left outer edge of a right-floated element will not be to the left of the right outer edge of its left-floated element.

4) The top of a floating element cannot be higher than the top of its parent element. If a floated element is between two merged margins, the floated element is placed as if there was a block-level parent element between the two elements.

This prevents the floated paragraph from moving all the way up to the top of the parent element common to all three paragraphs.

5) The top of a floating element cannot be higher than the top of all previous floating elements or block-level elements.

6) If a floated element appears before another element in the source document, the top of the floated element must not be higher than the top of any line box containing the box generated by the element.

7) There is another floating element to the left (right) of the left (or right) floating element, and the right outer boundary of the former cannot be to the right (left) of the (left) boundary of its containing block.

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

9) The left floating element must move as far as possible to the left, and the right floating element must move as far as possible to the right. The higher the position, the further it will float to the right or left.

Practical behavior

Insert a left-floating image in paragraph 1:

Look like this The floated element extends beyond the bottom of the left element, but not significantly. The floating rules discussed earlier only deal with the left, right and top boundaries of the Lelo float element and its parent element, but not the bottom boundary.

CSS2.1 clarified one aspect of the behavior of floated elements: floated elements stretch to include all of their descendant floated elements.

Set the left margin of the image to 10 pixels, and add the background and border of the Test title:

Since the floated element is both inside and outside the flow, this will definitely happen. The content of the title is "displayed" by the floating element, but the width of the title element is still the same as the parent element. In order to avoid being covered under the floating element, the specific content is not displayed from the left edge of its content area.

Clear

You may not always want content to flow through floated elements, and in some cases, you may want to specifically avoid this behavior . In this case, you want to set the first element of the section to disable floated elements from appearing next to it. If the first element is placed next to a float, it will be pushed down until the child float appears below it, and all subsequent content will appear behind it.

This can be done using the clear attribute.

Add the attribute clear:left to the title "Test"

Similar to
in HTML to prevent floating elements on the left side of the h3 element , will also push h3 past all left floating elements, but also allow floating elements to appear on the right side of h3.