The impact of floating and how to remove the impact of floating

What is called floating:
Floating causes the current label to move out of the document stream, creating a floating effect, and also affecting the location and Width,height properties of the surrounding elements (front and back tags) and parent elements.
Let's take a look at the whole process of floating in a small example:
1. First we create a new Web page, in the Web page with DIV elements created three small squares, in order to distinguish between the different ID values and background color, the code is as follows

1 <style>2 Div{3 width:100px;4 Height:100px;5 }6 #green{7 background:Green;8 }9 #blue{Ten background:Blue; One } A #red{ - background:Red; - } the </style> - <DivID= "Green"></Div> - <DivID= "Blue"></Div> - <DivID= "Red"></Div>

To facilitate our observation and resolution of the whole process of floating, we will rotate the screen perpendicular to the line of sight by 90 degrees to get the effect on the right side (no painting talent, will look at). It is not difficult to see from the diagram on the right that when a page element is not floating, all elements are placed next to the screen and displayed in a presentation layer (document flow).

Understanding the layout of the initial layer of the page, we give the green div plus left floating effect, get the effect, will be perpendicular to the line of sight rotation 90 degrees, we get the effect in the right image:

After analyzing the floating and floating completion, we have preliminarily mastered the principle of floating positioning and summarize several methods of clear floating effect:

1. Parent DIV defines height

Rationale : If the parent element does not have a height defined, and the parent element's height is fully stretched by the child element, the parent div manually defines the height, which resolves the problem that the parent Div cannot automatically get to heights.
Advantages : Simple, less code, easy to master.
cons : Only for highly fixed layouts, to give a precise height, if the height is different from the parent Div, there is a problem. Can have a big impact on responsive layouts.
2. Add empty div tag at the end Clear:both　

　

principle : Add an empty div, use CSS to improve the clear:both to clear the float, so that the parent div can automatically get to the height. Because the effect of this property is to clear the effect of floating on that element, that is, a sibling div floats that causes the floating element to move out of the document stream, leaving the non-floating element up, the effect on the page is that the floating element is obscured by the non-floating element, and the non-floating element is placed below the floating element. That is, the layout effect can be like a document flow, but because this non-floating element does not have a high-width attribute, the height of the parent element is calculated based on the top border of the element, and is equivalent to the adaptive height in the document flow.

Advantages : Simple, less code, good browser support, not prone to strange problems

Disadvantages : Many beginners do not understand the principle, if the page floating layout more, it is necessary to add a lot of empty Div, people feel very bad.

3. Parent div Definition Pseudo-class: After and zoom

<style type= "Text/css" >. Div1{background: #000080; border:1px solid Red;} div2{background: #800080; border:1px Solid red;height:100px;margin-top:10px}. Left{float:left;width:20%;height:200px;background: #DDD}. Right{float: Right;width:30%;height:80px;background: #DDD}/* Clear floating Code */. Clearfloat:after{display:block;clear:both;content: ""; visibility:hidden;height:0}. Clearfloat{zoom:1} </style> <div class= "Div1 clearfloat" > <div class= " Left ">Left</div> <div class=" right ">Right</div> </div> <div class=" Div2 "> Div2 </ Div>

principle : The action and effect of element generation pseudo-class is equivalent to the principle in Method 2, but IE8 and non-IE browser support: after,zoom (ie has attribute) can solve ie6,ie7 floating problem
Advantages : Browser support is good, not prone to strange problems (currently: large sites are used, such as: Tencent, NetEase, Sina, etc.)
Disadvantages : Many code, many beginners do not understand the principle, to use two code together to let the mainstream browser support.

recommendation : recommended, we recommend defining public classes to reduce CSS code.

4, Parent div definition Overflow:hidden

　　

principle : Overflow:hidden means that the part to be trimmed is hidden, so if the element of float does not account for the normal flow position, The containing block of the normal stream should be trimmed based on the content height if the height is the default auto then cropping without calculating the height of the floating element in it will probably cut float. This is anti-layout common sense. So if the container is not explicitly set, it must calculate the full height of the content in order to determine where the height of the hidden floating is to be counted in passing the target of clearing the float.

Pros : Simple, less code, good browser support

disadvantage : cannot be used in conjunction with position, because the size of the excess will be hidden.

recommendation : It is recommended to use only those friends who are not using position or who understand more deeply about Overflow:hidden.

5, Parent div definition Overflow:auto

<style type= "Text/css" >. Div1{background: #000080; border:1px solid red;/* Fix Code */width:98%;overflow:auto}. div2{ Background: #800080; border:1px solid red;height:100px;margin-top:10px;width:98%}. Left{float:left;width:20%;height : 200px;background: #DDD}. Right{float:right;width:30%;height:80px;background: #DDD} </style> <div class= " Div1 "> <div class=" left ">Left</div> <div class= ' right ' >Right</div> </div> <div class= "Div2" > Div2 </div>

　　

principle : The same as the method four principle, but note that there may be a scroll bar effect

Pros : Simple, less code, good browser support

disadvantage : Scroll bars appear when the internal width is higher than the parent Div.

recommendation : Not recommended, if you need to scroll bar or make sure your code does not appear scroll bar to use it.

6, the parent Div also floats together

　

principle : All the code floating together, it becomes a whole, helpless move, uninteresting, to a large extent, will affect the layout of subsequent elements

Pros : no advantages

cons : New floating issues are created.

recommendation : Not recommended, only for understanding.

7, Parent div definition display:table

　　

principle : The div attribute becomes a table, and the table-specific properties determine that it is not affected by the floating element itself.

Pros : no advantages

cons : New and unknown issues arise. (table differs from other elements, there are many unknown problems)

recommendation : Not recommended, only for understanding.

　

　

The impact of floating and how to remove the impact of floating