1. Standard flow (normal flow)
Standard stream is also called document stream, ordinary stream.
The standard flow actually means that the tag elements in a web page are arranged in order from top to bottom and from left to right. For example, block-level elements will occupy a row, and the elements in the row will be arranged one after the other in order ; according to the layout arrangement of this major premise, there will be absolutely no exceptions called normal flow layout.
Two, float (float)
- Floating was first used to control the picture, in order to achieve the effect of "surrounding" the picture by other elements (especially text).
- Now we mainly use floats
让块级元素并排显示.
1, what is floating
the floating element means disposed floating element will release properties from the standard normal control flow , the parent element is moved to the specified position process.
选择器 {
float:属性值;} //left 、right 、none
2. Floating characteristics
-
Floating off the standard stream
-
Not occupying a position
-
Will affect the standard flow
-
Float only left and right
a. The floating element is always aligned with its nearest parent element. But it will not exceed the range of the inner margin.
b. The arrangement position of floating elements is related to the previous element (block level). If the previous element has a float, the top of the A element will be aligned with the top of the previous element; if the previous element is a standard stream, the top of the A element will be aligned with the bottom of the previous element.
(1) A child box in a parent box, if one of the children has a float, the other children need to be floated. In this way, the display can be aligned one line.
(2) After the element is added with a float, the element will have the characteristics of an inline block element. The size of the element depends entirely on the defined size or the default content of the float. The corresponding float is displayed according to the position where the element is written.
(3) All elements within an element are floating. If the parent element has no height set, its height will become 0, which means that the height of the parent element is collapsed.
(4) The floating element cannot be separated from the parent element, it can affect the height of the parent element, and will go to other boxes.
(5) If one box is floating and the other is not floating or positioned (completely out of the standard document flow), the two boxes can be overlapped together
(6) Two floating elements cannot be overlapped together
(7) Floating elements are all up Float to the boundary of the parent box
Summary:
(1) The floating element box is floating, floating on top of other standard flow boxes.
(2) The floating box does not occupy the position. If there is no floating element, it will occupy its original position.
() First, the floating box needs to be used in conjunction with the parent of the standard stream. Floating can make the element display mode embodied as in-line block characteristics. (For row elements, you can directly set the width and height.)