Label
About floating:
From a macro perspective, there is a fundamental difference between our web pages and design software such as PhotoShop: The production of web pages is a "stream" and must be top-down, like a "knit sweater ". Design software can be painted wherever you want.
Differences between intra-row elements and block-level elements:(Very important)
Line element:
- Side by side with other row elements;
- Width and height cannot be set. The default width is the text width.
Block-level elements:
- Occupies a row and cannot be tied with any other element;
- Acceptable width and height. If no width is set, the width is changed to 100% of the parent by default.
Block-level elements can be converted into intra-row elements:
Once you set a block-level element (such as Div:
display: inline;
The element in the row is converted into a block-level element:
In the same way, once a Row Element (such as span) is set:
display: block;
Then, the label will immediately become a block-level element, which is no different from a div. Block refers to block. That is to say:
- In this case, the width and height of the span can be set.
- At this time, this span must occupy a line, and others cannot join him.
- If the width is not set, it will be full of the father
How to float elements:
The horizontal movement of elements means that the elements can only move left and right, but cannot move up or down.
A floating element moves left or right as much as possible until its outer edge hits the border of the contained box or another floating box.
The element after the floating element will surround it.
Elements before floating elements are not affected.
If the image is right floating, the following text stream will surround it on the left:
Instance: IMG {float: Right ;}
Suggestions for beginners:
At the beginning, we must follow the following principle:It will never be a single thing floating, it will always be a floating thing, it will be a floating thing, everyone will be floating.
Several Methods to clear floating:
1. Add an empty DIV in the last child element to set clear: Both
2. Add a pseudo-class element: After {
clear:both; content:""; display:block;
}
Instance:. clearfloat: After {display: block; clear: Both; content: ""; visibility: hidden; Height: 0}
3. Set a reasonable height for the parent element.
4. Add overflow: hidden to the parent element (it is not recommended to hide the overflow part ).
Supplement:
A span tag can be set to the width and height without being converted to a block-level element. So one thing that can be proved is that all labels are no longer in-row or block. That is to say,Once an element floats, it will be able to side by side and set the width and height. Whether it is a div or a span.
Notes on floating