CSS Learning notes (float and box models)

1, when the element or its wrapping layer is set absolute positioning or is floating, then margin:0 auto, the effect of automatic centering will not be realized.

2, the box model of the three-bit stereoscopic structure from the first layer to the fifth layer in order: border, content+padding, Background-image, Background-color, margin.

3.

Elements of float property (float) are set: 1, will be moved to the specified direction (left or right) until the edge of the container, 2, in the standard document flow, 3, if not set wide, the content of the width of the height of the subject, 4, only adjacent to the subsequent elements of the impact;

4.

Common methods of clearing floating 1, clear properties-common clear:both;
2, Clear:left, or clear:right; clears the float 3 on the left or right side of the element, sets the width:100% (or fixed width) +overflow:hidden at the same time, and can also clear the float. Usually set to the element that is subject to the float. p{width:100%; Overflow:hidden} or P{width:both}
4. Add an empty label to the floating element immediately before the next block element (deprecated)

If the parent inclusion layer is not set to float, the sub-inclusion layer is set to float, which affects the accounting elements behind the parent inclusion layer and the parent inclusion layer of the child containing layer!! So you want to clear the floating effect on the parent inclusion layer setting. When the parent contains a quick indent, it is not valid to clear the floating method with Clear:both, and Clear:both is generally used for clear floats immediately following the elements. In this case, using Overflow:hidden will be effective,

The Overflow:hidden is used to clear the floating effect of float on the parent element Clear:both; To clear the floating effect of float on subsequent elements

CSS Learning notes (float and box models)