Web Front End Learning (5)--floating principle and clear floating

Tag: Float clear clears floating float principle

Floating principle and clear float

Previous section Review

In the previous section, "Getting Started with web Front End" (4)-Features and transformations of block-level elements and inline elements (http://cherry360.blog.51cto.com/12176744/1863945), describes the characteristics of block-level elements and inline elements, and a rough overview of how to convert. In addition to the display property, you can specify the type of the element, such as Display:block, Display:inline, and Display:inline-block. Of course the most used is the last display:inline-block. In combination with the example:

Example 1:

<! DOCTYPE html>
 
  
 
Show Results:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M00/89/28/wKiom1gJhJuzAw-aAAALuMxgnms386.png-wh_500x0-wm_3 -wmp_4-s_1558131286.png "title=" C.png "alt=" Wkiom1gjhjuzaw-aaaalumxgnms386.png-wh_50 "/>
Example 2, if you add Display:inline-block to the CSS style, change the CSS style to:
div,span{height:100px;    width:100px;    Background:blue;    border:1px solid red; Display:inline-block;}
The display effect will become:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M01/89/25/wKioL1gJhCah6AV3AAAG2KbBSVk001.png-wh_500x0-wm_3 -wmp_4-s_3881240686.png "title=" B.png "alt=" Wkiol1gjhcah6av3aaag2kbbsvk001.png-wh_50 "/>
650) this.width=650; "src=" Http://img.baidu.com/hi/babycat/C_0020.gif "alt=" C_0020.gif "/> from the above comparison results can be seen, The effect of property display:inline-block is that you can display block-level elements in the same row, while inline elements also become wide. But in this way, there are some hidden problems, that is, line break is parsed. That is, after the labels are wrapped, there is a gap between the displayed effects, and the gap size between the different browsers is inconsistent. In addition, IE6, IE7 are inline-block effects that do not support block-level elements. So is there any other way to solve it? This is the question to be discussed in this section.

Floating principle
any element can be floated, the floating box can move left or right, until its outer edge touches the bounding position of the containing box or another floating box, and because the float box is not in the document flow, the elements in the document flow behave as if the floating box does not exist. a document Flow is the position in the document where objects are placed in the arrangement . Not much to say, see examples of the most intuitive:
Example 3:
<! DOCTYPE html>
 
  
 
Show Results:
650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M01/89/27/wKioL1gJsyuRuFeNAAAQj4FwoQU201.png-wh_500x0-wm_3 -wmp_4-s_1544538579.png "title=" F.png "alt=" Wkiol1gjsyurufenaaaqj4fwoqu201.png-wh_50 "/>
650) this.width=650; "src=" Http://img.baidu.com/hi/babycat/C_0020.gif "alt=" C_0020.gif "/> The results of this example and the results of Example 2, The difference between the code is to change the Display:inline-block to Float:left, and the difference between the display results is that the label wrapping is not parsed. There are also features that are not visible to the naked eye, that is, elements that use the float attribute are out of the document flow, and now look at the following example:
Example 4:
<! DOCTYPE html>

 
  
 
Show Results:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M01/89/27/wKioL1gJtWaiLNzuAAAGtxCRKG4188.png-wh_500x0-wm_3 -wmp_4-s_95572139.png "title=" G.png "alt=" Wkiol1gjtwailnzuaaagtxcrkg4188.png-wh_50 "/>
650) this.width=650; "src=" Http://img.baidu.com/hi/babycat/C_0020.gif "alt=" C_0020.gif "/> From Example 4 can be seen, The Red block box uses the left float, and the Blue block box does not use a floating element, so the red block is out of the flow of the document, and the blue block looks like a red block of boxes, overlapping.

The results of this paper summarize several characteristics of floating elements:

 
   

  
    
 
     
Inline elements support wide height;
 
     
Block elements can be displayed in peers;
 
     
The width is open by the content;
 
     
Out of document flow;
 
     
Raise the level half layer.

 
    
 
   
Having learned about the floating principle, we know that elements that use the float attribute are out of the document flow, so other elements that do not use floating properties will not see them, leading to overlapping situations, and how to resolve them? Now, let's introduce a clear floating knowledge point.
Example 5:
In the code in Example 4, change the style of the Box2 to:
. box2{Width:200px;height:200px;background:blue;clear:left;}
 
  
 
Show Results:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M00/89/2A/wKiom1gJue6w08eNAAAINO9Icg0451.png-wh_500x0-wm_3 -wmp_4-s_2116165435.png "title=" H.png "alt=" Wkiom1gjue6w08enaaaino9icg0451.png-wh_50 "/>
The clear property clears the left float of the red block box, so the blue block is no longer overlapping with the red box. Here is just one way to clear the float, but there are plenty of ways to get started here.

 
  
 
warm hint 650) this.width=650; "src=" Http://img.baidu.com/hi/jx2/j_0057.gif "alt=" J_0057.gif "style=" padding:0 Px;margin:0px;vertical-align:top;border:none; "/>:
Float Float Property value: left/right/none;
Clear clears the Floating property value: Left/right/both/none.
This article is from "Little Qian gas station" blog, please be sure to keep this source http://cherry360.blog.51cto.com/12176744/1864258
Web Front End Learning (5)--floating principle and clear floating