Web Front-end BASICS (5): Clear floating methods and advantages and disadvantages, web Front-end
1. How to Treat artists
- For reliable artists, the accuracy of the art map is about 0 PX.
- For unreliable artists, they should communicate with the product manager and use emails.
2. Impact of floating on documents
- Floating will cause the current element to flow out of the document, which will affect the parent level;
- When the child element is floating, the parent element has a height of 0, which is called height collapse;
3. How to clear the float: 3.1 When the float needs to be cleared:
- After the sub-tag is floating, the height of the parent tag cannot be lifted, so the sub-tag must be floating;
- The newly added label needs to be flushed if it is not affected by the previous floating element;
3.2 Floating Method:
- 1. child elements are floating, and parent elements are also floating;
- 2. Set the clear: both attribute for an empty tag;
Float is not allowed. For example:
Put it at the end of the purge;
- 3. the br tag is floating
Set Property -- clear = "all" for the br tag.
- 4. Set overflow: hidden/auto for parent labels;
- Hidden: exceeds content hiding.
- Auto: Default attribute. You can cut the content and add a scroll bar when needed. A scroll bar is displayed when it exceeds the limit.
- 5. after pseudo-element floating
Principle: replace null labels. It is equivalent to replacing empty labels with a block with a height and width of 0.
Example:
4. Advantages and disadvantages of the clear Floating Method: 4.1 sub-elements are floating, and parent-level elements are also floating.
- Advantage: There is no structure or semantic problem, and the amount of code is small;
- Disadvantage: the layout of elements adjacent to the parent element is affected.
4.2 empty label setting property clear: both
- Advantages: easy to understand;
- Disadvantage: a large number of blank tags are added, and the structure and performance are not separated, which is not conducive to maintenance.
4.3 set overflow: hidden/auto for parent labels
- Advantage: There is no structure or semantic problem;
- Disadvantages:
- Hidden --> when the content increases, it is easy to cause non-automatic line breaks, so that the content is hidden and the elements to overflow cannot be displayed.
- Auto --> after multiple nesting, in some cases, all content is selected; in IE, when mouseover changes the width, the scroll bar of the outermost layer module appears.
4.4 after pseudo-element clear floating
- Advantage: the structure and semantics are completely correct;
- Disadvantage: improper reuse may increase the amount of code.
4.5 br label floating
- Advantage: The syntax is slightly stronger than that of null tags, and the amount of code is small;
- Disadvantage: the structure and performance are not separated.
View comments
