Let's take a look at the explanation of floating float and absolute positioning absolute:
float: A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.
Absolute: An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
For floating float, it is just a floating box out of the standard flow, not safe from the standard flow, and absolute positioning absolute is to remove the element box completely out of the standard flow from the document flow:
Take a look at the following example:
Absolute positioning Absolute
#div1 {background: #666;p osition:absolute;top:0px;left:0px;/*float:left;*/width:100px;height:100px;} #div2 {background: #093; width:200px;height:200px;} #div3 {background: #363; width:100px;height:100px;}</style><Body><DivID= "Div1">1111111<P>1111111</P> <P>1111111</P></Div><DivID= "Div2"> <P>2222222</P> <P>2222222</P> <P>2222222</P></Div><DivID= "Div3"> <P>3333333</P> <P>3333333</P> <P>3333333</P></Div>
float float:
#div1 {background: #666;/*position:absolute;top:0px;left:0px;*/float:left;width:100px;height:100px;} #div2 {background: #093; width:200px;height:200px;} #div3 {background: #363; width:100px;height:100px;}</style><Body><DivID= "Div1">1111111<P>1111111</P> <P>1111111</P></Div><DivID= "Div2"> <P>2222222</P> <P>2222222</P> <P>2222222</P></Div><DivID= "Div3"> <P>3333333</P> <P>3333333</P> <P>3333333</P></Div>
For floating float It does not cover the contents of the div2 inside the content 222222 and the absolute positioning absolute to cover the contents of the DIV2, so we need to use floating and absolute positioning when it is necessary to note, although in some cases, float and absolute can achieve the effect, But we can't ignore their differences.
Jsfiddle: Absolute positioning absolute, float float
The difference between floating and absolute positioning
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
