CSS (v) floating

Main content of this chapter

• What is floating?
• How to float
• Floating side effects and how to remove side effects
• Usage Scenarios

first, float (float)

Meaning: Let the elements float, arranged side by side;

second, how to float

• Float:left 1, 2, 3
• Float:right attention to use in reverse order ... 3, 2, 1
• Float:none not floating
• Float:inherit inherit parent element floating mode

Note: Once the element has a floating property, it is automatically converted into block-level elements;

third, side effects

child element Floats, parent element collapses

The surrounding elements will be affected such as: floating elements out of the document flow, the other non-floating elements occupy the position of the floating elements, floating elements will float on the top of the floating element;

iv. addressing side effectsA, resolving the parent element collapse problem

A.1, adding a height to the parent element

A.2, parent element add two attributes

• Overflow:hidden
• Zoom:1

A.3, the parent element also gives a float, is not recommended to use, the surrounding elements will produce side effects;

B, to solve the problems affecting the surrounding elements

B.1, add an empty element to set the Clear method

• Clear:none not floating
• Floating elements are not allowed on the left side of Clear:left
• Floating elements are not allowed on the right side of Clear:right
• Floating elements are not allowed on both sides of Clear:both

C, recommended combination using A.2 and B.1

v. Use of the sceneA, Text wrapping

Brothers for text text does not need to float, floating is not a sibling element of the text, you can achieve text wrapping.

........

CSS (v) floating