Rule3: In line elements 、inline-block After the element floats , Its top will align with the top of the row
Implementation code :float-rule_01- other
Rule4: If the element is left ( Right ) float , The left side of the floating element ( Right ) The boundary cannot exceed the left of the containing block ( Right ) The border
Numbers with circles , Marks the position of the floating element before floating
Rule5: Floating elements cannot be stacked
If an element floats , Another floating element is already in that position , The last floating element will be close to the previous floating element ( Left float find left float , Right float, right float )
If there is not enough space left in the horizontal direction, display floating elements , The floating element will move down , Until there is enough space
Rule6: The top of a floating element cannot exceed the top of the containing block , Nor can it exceed the top of all previous floating elements
Sample code :float-rule_01、float-rule_02、float-rule_02- other 、float-rule_03
Floating common scenarios :
Resolve inline elements 、inline-block Horizontal clearance of elements
Layout
The problem with floating : High collapse
Because the floating element is out of the standard flow , It becomes a de standard element , So no longer report height to the parent element
When calculating the total height of the parent element , The height of the floating child element will not be calculated , Led to High collapse The problem of
The process of solving the problem of high collapse of parent elements , Generally called Clear float ( Clear the float 、 Remove the floating )
Code : Floating problem
Common methods of clearing floating
Set the parent element to a fixed height
Poor scalability ( Not recommended )
Code : Clear float -01
Let the parent element float
It may cause all elements in the page to float
The parent element is out of the standard flow
Changed the box properties of the element ( Not recommended )
Code : Clear float -02
Make the parent element an absolute positioning element (position Set to absolute or fixed)
The parent element is out of the standard flow
Changed the box properties of the element ( Not recommended )
Code : Clear float -03
Set the parent element display by inline-block、inline-table、table、table-cell、table-caption
Changed the box property of the parent element ( Not recommended )
Code : Clear float -04
Set the parent element overflow by visible Value beyond ( such as hidden、auto、scroll)
Changed the default behavior of the parent element for content overflow ( Not recommended )
Code : Clear float -05
Add an empty block level child element at the end of the parent element , And let it set clear: both
Will add a lot of meaningless empty tags , Maintenance trouble
It violates the principle of separating structure from style ( Not recommended )
Code : Clear float -06
Add a... At the end of the parent element br label :<br clear="all">
Will add a lot of meaningless empty tags , Maintenance trouble
It violates the principle of separating structure from style ( Not recommended )
Code : Clear float -07
None of the above methods are recommended , Just know
Add... To the parent element ::after
Pseudo elements
Many people move to the Internet industry every year , To put it bluntly, it is also aimed at high salary , Whether you are about to enter this industry or want to change careers , Learning is essential . As a Java Development , Learning has become a part of daily life , If you don't learn this industry, you will be eliminated , This is also the cruel reality of this industry .
If you are right about Java Interested in , Want to change careers and change yourself , Then take advantage of the opportunity to act . Maybe , This Limited edition Java Zero foundation dictionary Can help you .
Take this Java Zero foundation dictionary , Just click here to download for free