CSS basics It's hard.

A replacement element is a browser that displays specific content based on the elements and attributes of its tag.

For example:, <input>, <textarea>, <select>, <object> are all replacement elements

Most of the rest of the elements are non-replaceable elements, they tell the browser directly, display it out <p><div> etc.

In addition to the classification of replaceable and non-replaceable elements, elements in CSS are categorized in another way: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).

------------------------16 rules for CSS floating-------------------------------------------------

1. The floating element is removed from the normal flow of the document, but it still affects the layout
2. The floating non-replacement element must specify width for it, otherwise the width of the element will tend to 0 and the floating element cannot be fully displayed
3. Once the element has a floating property, it becomes a block-level element.
4. The left and right outer bounds of a floating element cannot exceed the left and right boundaries of the containing block
5. Floating elements never overlap

6. Floating elements will not exceed the upper padding of the container
7. After floating elements never exceed the top of the first floating element
8. Floating elements are placed as high as possible, and this height is limited by rules 6 and 7
9. The bottom boundary of the floating element is not required, so when the container is not sufficient to accommodate the floating element, the floating element will extend downward. However, some browsers will take the container height to accommodate the floating element

, and one possible way for a browser that conforms to the CSS2.1 specification to allow a container to tolerate floating elements is to let the container float
10. When the floating element is stretched downward, it will not affect the display of normal text, and the text will be offset relative to the floating element. But some text backgrounds are obscured by floating elements

11. If the floating element has a negative margin set, this will break rules 4, 6, 7
12. When the width of the width> container of a floating element, this causes the floating element to go beyond the left and right edge of the container (the Zou is dependent on the floating direction)
13. Floating overlap rule: When an inline box (such as strong) overlaps a floating element, its border, background, content is above the floating element, and when the block box overlaps the floating element, its border, background

Floating element, while content is above the floating element.
14. Applying clear:left to an element means that there is no floating element on the left side of the element.
15.clear cannot be used for non-block-level elements, such as <br/> In most browsers it appears to be a non-block-level element, so if clear is applied to the BR it will have no effect.

Unless you change the display:block of Br.
16. If an element applies clear to clear the float, the value of the top margin set by this element is ignored, but there is a recalculation of the top margin value (possibly even 0). If you want this element

There is a definite interval between the floating elements and the bottom margin can be set on the floating element.  

------------------------CSS Floating 16 rules-end-------------------------------------------------The parent element of the float element cannot specify the clear property (Mac IE)

If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible. Use EM as a unit. Width of the sum of <99%

float element cannot specify margin, padding "Resolution 1: Use the Hack method to specify special values for IE; Resolution 2: You can nest a div inside a float element to set margin and padding

CSS basics It's hard.