CSS element positioning-floating (float) and clear

The basic idea of positioning in CSS:

Defines where the element box should appear relative to its normal position, or relative to the parent element, or relative to another element, or even the position of the browser window itself. Float (float):

   In CSS, all elements are allowed to float, and this behavior is implemented using property float. Float Optional value: left | Right | none | Inherit

Floating element:

There are several things to remember about floating elements:

Elements declared as floating are removed in some way from the normal flow of the document, but they still affect the layout. One concrete manifestation of this effect is that when an element floats, the other content "wraps" around the floating element.

If you want to make sure that you want to float a replacement element, you must declare a width property for that element. Otherwise, the width of the element tends to be 0 according to the CSS specification. Assuming that the minimum width of the browser is 1 characters, there may be only 1 characters wide for a replacement floating element that does not declare the Width property.

The outer margin of a floating element (margin) is never overlapped with the outer margin of other floating elements.

If you want to ensure that an element does not float, it is best to display a float property value that declares the element as: none. Although the default value for the float property of all elements is none, in the browser implementation, all elements will float in some way if the None value is not displayed. the detailed understanding of the float containing blocks of floating elements (containning block)

The containing block of a floating element is its most recent block-level ancestor element.

A floating element generates a block-level box, regardless of what the element itself is (for example, a span is normally within the inline element Display:inline)rules for placing floating elementsThe left (or right) outer boundary of a floating element cannot exceed the left (or right) inner boundary of the containing block. (Note: Do not include the upper and lower bounds oh ~ ~ ...) The left (or right) outer boundary of a floating element must be the right (or left) outer boundary of the floating left (or right) element that appears before the source document, that is, all floating elements are arranged in the ' queue ' form, unless the top of the floating element appears below the bottom of the floating element that appears. This rule prevents floating elements from "overwriting" each other and ensures that all floating elements are visible. The right outer boundary of a left floating element does not go to the right of the left outer edge 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 any left floating element on its left side. (This rule reads quite a mouthful-_-, understanding is also quite laborious, need to have a more in-depth understanding of CSS box model), do not understand this rule does not matter, just remember: This rule is ultimately useful to prevent overlapping between floating elements. If you want to delve into it, you can see my notes: CSS box model. Here is a chestnut to help you quickly understand: Suppose we now have a 600 * 600 div, so that after it contains two 400 * 400 floating elements, one floating to the left, one floating to the right, 400 + 400 greater than 600, this time to prevent between the two occur 100 Pixel overlap, the browser will float the second floating div (the one on the right), as required by this rule, until its top is below the bottom of the left floating div. The demo is as follows:

<div style= "width:600px; height:600px; Background-color:darkred ">
<div style= "width:400px; height:400px; Background-color:yellow; Float:left; " ></div>
<div style= "width:400px; height:400px; Background-color:bule; Float:right; " ></div>
</div>
The top of a floating element cannot be higher than the top of its parent element. If a floating element is between two merged outer elements, the floating element is placed as if there is a block level element between the two elements. The second half of the rule is also a piece of the same thing that you don't understand, but hold on to a chestnut: now there is a Div, which contains three paragraphs (

, where the middle paragraph is set to float. In this case, to prevent the paragraph from floating to the top of the three-paragraph common parent element Div, this rule is required to qualify. At this point, the attributes of block-level elements are displayed between the top and bottom two paragraphs so that the intermediate paragraphs float. The top of a floating element cannot be higher than the top of all floating elements or block-level elements before. (similar to the previous rule) but the more intuitive use of this rule is: the sum of the widths of 1 and 2 is greater than the width of the common parent block element of the three Div, and the div1 and Div2 are left floating, so the div2 automatically wraps to the bottom of the DIV1, which is given earlier, The intuitive manifestation of this rule is that div3 its top does not exceed the top of the div2, and even if there is still enough free space on the right side of the div1, this rule, combined with the second rule, makes it easy to understand how the layout appears.

<div style= "width:180px; height:220px; Background-color:blue ">
<div style= "width:80px; height:40px; Float:left; BACKGROUND-COLOR:RGB (205, 468) "> </div>
<div style= "width:120px; height:40px; Float:left; BACKGROUND-COLOR:RGB (205) "> </div>
<div style= "width:40px; height:40px; Float:right; Background-color:yellow "> </div>
</div>

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 in the box that contains the floating element (the containing block). Take a chestnut to understand memory: suppose there is a floating image in the middle of a paragraph, due to the restriction of this rule. The top of this image can only be placed at the top of the line box where the image is located. The right outer boundary of the left (or right) floating element is not on the right (left) edge of its containing block (left) when the other floating element is right (or right). That is, a floating element cannot exceed the bounds of its containing element unless it is really wide and cannot be put down (for example: a 400 * 400 parent block element contains a floating element of 600 * 600). Examples of the above Rule 1 and 2 are the demos of this rule. Floating elements must be placed as high as possible. Of course, the prerequisite to be as high as possible is to satisfy all the above rules.Practical Application

In most browsers, when the height of a floating element exceeds the height of the containing element, its display goes down beyond the containing element. Some old-age browsers may be able to solve this problem by adding a solution that contains the height of the element. The same left and right border is also the same treatment scheme, chorme40+ in the middle of the test pass.
When the value of the outer margin is negative, it can cause the floating element to move outside the parent element. It looks like a violation of the previous emission rules. The understanding of this number is to use a pen to calculate, this need to understand the CSS box model.
What happens if a floating element overlaps with the content in the normal stream?
In response to this problem, the CSS2.1 specification gives a clear explanation:

When an inline box overlaps a floating element, its border, background, and content are displayed above the floating element '

When a block box overlaps a floating element, its border and background are displayed under the floating element ', and the content is visible on the floating element ' (Clear)

With the clear property, we can ensure that no floating elements appear next to the location specified by the element.
Direct on chestnuts:
We want the P element not to be on the right side of the floating element, so we can declare p{clear:left}. You can also understand that there is no floating element on the left side of the P element.