Css details review notes -- float and css details float

Css details review notes -- float and css details float

In addition to changing the font, background, and all other attributes, CSS also performs basic layout tasks.

Div + css is the most common layout method by using floating, positioning, and box model technologies.

The basic idea of positioning is simple. It allows you to define the location of an element box relative to its normal location, or the location of another element, or even the browser window itself, relative to the parent element.

On the other hand, css1 proposes floating. Float is not fully positioned, but it is certainly not a normal stream layout.

 

Floating

Declaring will cause an image to float to the right, and allow other content (text) to "circle" the image. Css allows floating of any element, from the image to the paragraph to the list, all elements can be floating, implemented using the attribute float.

Therefore, the above Code can also write

Floating Element

For floating elements, remember the following points. First, floating elements will be deleted from the normal stream of the document in some way, affecting the layout. If an element is floating, other content will "surround" the element.

Note that the margin around the floating element is not merged. If you float an image with a margin of 20 pixels, the image will have at least 20 pixels of space. If other elements ring with this image and both have margins, these margins will not be merged with the floating image margins.

If you want to float a non-replacement element, you must declare a width for the element. Otherwise, the floating section may only have 1 character width.

Not Floating

In addition to left and right, the float attribute also has a value. Float: none is used to prevent element floating. It may not be considered that if an element is not floating, float will not be declared. In fact, to get a normal non-floating element, this value is required. Otherwise, all elements will float in some way.

 

Float details

Before discussing the details of floating, we must first establish the concept of block. The floating element's contained block is the closest block-level ancestor element. Therefore, in the following tag, the floating element contains the floating paragraph element:

In addition, a floating element will generate a block-level box. No matter what the element is, if a link is floating, even if the link itself is a row element, A line box is usually generated, but as long as it is floating, a block-level box is generated, rule:
1) The left and right boundary of a floating element cannot exceed the left and right boundary of its contained block. (Although setting a negative margin or floating element is wider than its parent element, it will appear outside the parent element .)
2) The left and right outer boundary of the floating element must be the (left) boundary of the left floating (or right floating) element in the source document, unless there is a floating element first at the top of the floating element at the bottom of the floating element.
Floating content is visible, so you don't have to worry about overlap between a floating element and another floating element. However, the positioning conditions are completely different, and the elements may overwrite each other.
3) The right boundary of the left floating element is not on the right of the left outer boundary of the right floating element. The left outer boundary of a right floating element is not on 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 placed between two merged margins, it is like there is a block-level parent element between the two elements.
This prevents floating paragraphs from moving up to the top of the parent element of the three paragraphs.
5) The top of a floating element cannot be higher than that of any previous floating element or block-level element.
6) if another element exists before a floating element in the source document, the top of the floating element cannot be higher than the top of any row box containing the box generated by this element.
7) the left (or right) floating element has another floating element on the left (right). The right outer border of the former cannot be on the right (left) of the contained block ).
8) floating elements must be placed as high as possible.
9) The left floating element must be as much as possible to the left, and the right floating element must be as much as possible to the right. The higher the position, the farther to the right or to the left.
 
Practical Behavior
Insert the left floating image in Section 1:

In this way, the floating element exceeds the bottom of the left element, but it is not obvious. The floating rule discussed earlier only deals with the left and right sides and upper boundary of the child element and does not involve the lower boundary.
Css2.1 clarifies one aspect of floating Element Behavior: Floating elements extend to include all their child floating elements.
Set the left margin of the image to 10 pixels, and add the background and border of the Test title at the same time:

Because floating elements are both in the stream and out of the stream, this will certainly happen. The title content is displayed by the floating element, but the width of the title element is equal to that of the parent element. To prevent the content from being displayed on the left boundary of the floating element.
 
Clear
You may not always want the content to flow through floating elements. In some cases, you may want to avoid such behavior. In this case, you want to set the first element of no section to prohibit floating elements from appearing next to it. If the first element may be placed next to a float, it will push down until there is a child floating element, and all subsequent content will appear behind it.
This can be done using the clear attribute.
Add the clear: left attribute to the title "Test"

Similar to <br clear = "left"> in html, to prevent floating elements on the left of h3 elements, h3 is pushed to all left floating elements, but floating elements are allowed to appear on the Right of h3.