The principle and method of clearing floating, and the method of clearing floating principle

The principle and method of clearing floating, and the method of clearing floating principle

Cause:

In the CSS specification, the floating position is separated from the normal stream of elements. Therefore, as long as the parent container containing floating elements is displayed, the positions of child elements are not considered, and they do not exist. This results in display. The parent container is like an empty container.

For example, the following code:

1 <div class="box">2     <div style="float:left;width:100px;height:100px;"></div>3     <div style="float:right;width:100px;height:100px"></div>4 </div>

When running in a browser, the actual view displays child elements outside the parent container.

Solution 1: add an empty Element

Add a non-floating element under the floating Element

The Code is as follows:

 1 <div class="box"> 2 　　<div style="float:left;width:100px;height:100px;"></div> 3 　　<div style="float:right;width:100px;height:100px;"></div> 4 　　<div class="clearfix"></div> 5 </div> 6  7 <style> 8 .clearfix{ 9     clear:both;10 }11 </style>

Solution 2: Floating parent container

Change the parent container to floating location, so that it can be floating with child elements.

The Code is as follows:

 1 <div class="box"> 2     <div style="float:left;width:100px;height:100px;"></div> 3     <div style="float:right;width:100px;height:100px;"></div> 4 </div> 5  6 <style> 7 .box{ 8     float:left; 9 }10 </style>

Solution 3: automatic clearing of floating Elements

The parent container can automatically "clear" the floating of child elements to identify the position of floating child elements without any display errors.

The Code is as follows:

 1 <div class="box"> 2 　　<div style="float:left;width:100px;height:100px;"></div> 3 　　<div style="float:right;width:100px;height:100px;"></div> 4 </div> 5  6 <style> 7 .box{ 8     overflow:hidden; 9 }10 </style>

Solution 4: Add sub-elements using CSS statements so that you do not need to modify the HTML code.

Is to use the after pseudo element method to automatically create an element at the end of the container.

The Code is as follows:

 1 <div class="box"> 2 　　<div style="float:left;width:100px;height:100px;"></div> 3 　　<div style="float:right;width:100px;height:100px;"></div> 4 </div> 5  6 <style> 7 .box:after { 8     content: "\0020"; 9     display: block;10     height: 0;11     clear: both;12     zoom:1;13 }14 </style>