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 applications

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 ）

• The purpose of clearing floating ： Let the parent element calculate the total height , Take the height of the floating child element into account

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

• pure CSS Style solution , Separation of structure and style （ recommend ）

.clear-fix::after {
content: "";
display: block;
clear: both;
height: 0; /* Compatible with old browsers */
visibility: hidden; /* Compatible with old browsers */
}
.clear-fix {
*zoom: 1; /* compatible IE6~7 browser */
}


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

Last

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