Home > Developer > Web Develop
float float:
The 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. (a)
Absolute positioning 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. (a)
These are the explanations for floating and absolute positioning.
At first glance it doesn't seem to matter, but think about it, there are a lot of similarities. For example, both are separated from the document flow, and the original space of the element in the document flow will be closed.
We can use both to achieve the same goal.
First write a Pizi:
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5The difference between <title>inline, block and Inline-block </title>6<style>7* {8margin:0;9padding:0;Ten } One #box { A width:500px; -margin:100px Auto 0Auto; - border:1px solid red; the } - - #a, #b, #c, #d { - width:100px; + height:100px; - margin:2px; + } A #a { at background: #ccc; - } - #b { -Background: #666; - } - #c { in Background:blue; - } to #d { + Background:green; - } the</style> * $<body>Panax Notoginseng<div id= "box" class= "Clearfix" > -<div id= "a" ></div> the<div id= "B" ></div> +<div id= "C" ></div> A<div id= "D" ></div> the</div> +</body> -Effect:
Now let's do a float to the left:
1 #a {2 background: #ccc; 3 float : Left; 4 }
We see that block a floats to the left, space is lost in the document flow, followed by B, C, and D.
What if we set absolute positioning for block a?
1 #a {2 background: #ccc; 3 Position:absolute; 4 }
We found the effect to be the same.
But what if there's a text behind block a?
1 <body>2 <div id= "box" class= "Clearfix" >3 <div id= "a" ></ Div>4 <SPAN>SD card received my ID number for activity culture low OH by activity ihawoidh</span>5 <div id= "B" > </div>6 <div id= "C" ></div> 7 <div id= "D" ></div> 8 </div>9 </body>
float float:
Absolute positioning Absolute:
So the difference is that the absolute positioning is independent of the entire model and does not affect the elements in the document flow, and the float affects the document flow after it.
Next, we are all floating or absolutely positioning for a, B, C, and D:
float float:
Absolute positioning Absolute:
This also makes it clear that the elements will be floated and arranged in the order of the floating flow, while the absolute positioning is that each element exists independently of the other elements.
Now, we want to put a, B, C, d of the parent element box to prop up, in fact, its parent element adaptive height, the float can be used with the clear property:
We can add one to the back of Block D.
1 <div style= "Clear:both" ></div>
Or there's a better way:
1 . clearfix:after {2 content: '. ' ; 3 Display:block; 4 height:0; 5 Clear:both; 6 Visibility:hidden; 7 }
This method uses the ": after" pseudo-element to insert a block-level element (Display:block) After the element's contents. Set its properties to "Clear:both" to achieve the same effect as the former.
As for the trade-offs of the above two methods, it is recommended to use the next one, because the following one does not have an effect on the structure of HTML without adding additional div block code in the HTML code.
What if we want to adapt the bounding rectangle of the parent element that makes absolute positioning? Clear can only be applied in the clear floating operation, which does not work for an absolutely positioned block of elements. So we can only get this effect by calculating the height of the parent element box.
If we need to achieve this effect:
There are four blocks of elements fixed at the corners of the page, with a fixed length-width block centered in the center of the page, and when we resize the page, the element blocks do not change in relation to the page position.
There are 2 ways to achieve this effect:
The first type: Floating + positioning:
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<title>float and Absolute</title>6<style>7* {8margin:0;9padding:0;Ten } One A #a, #b, #c, #d { - width:100px; - height:100px; the margin:2px; -Background: #666; - } - #a { + float: Left; - } + #b { A float: Right; at } - #c { - float: Left; - Position:absolute; -left:0; -bottom:0; in } - #d { to float: Right; + Position:absolute; -right:0; thebottom:0; * } $ #content {Panax Notoginseng width:400px; - height:300px; the background:red; + Position:absolute; Aleft:50%; thetop:50%; +Margin-left:-200px; -Margin-top:-150px; $ } $</style> - -<body> the<div id= "a" ></div> -<div id= "B" ></div>Wuyi<div id= "C" ></div> the<div id= "D" ></div> -<div id= "Content" ></div> Wu</body> - The second type: absolute positioning:
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<title>float and Absolute</title>6<style>7* {8margin:0;9padding:0;Ten } One A #a, #b, #c, #d { - width:100px; - height:100px; the margin:2px; -Background: #666; - } - #a { + Position:absolute; -top:0; +left:0; A } at #b { - Position:absolute; -top:0; -right:0; - } - #c { in Position:absolute; -left:0; tobottom:0; + } - #d { the Position:absolute; *right:0; $bottom:0;Panax Notoginseng } - #content { the width:400px; + height:300px; A background:red; the Position:absolute; +left:50%; -top:50%; $Margin-left:-200px; $Margin-top:-150px; - } -</style> the -<body>Wuyi<div id= "a" ></div> the<div id= "B" ></div> -<div id= "C" ></div> Wu<div id= "D" ></div> -<div id= "Content" ></div> About</body> $ -Careful observation found that the first method completely a little superfluous meaning, the four elements floating and positioning is not as good as the beginning of positioning directly. And if a floating implementation is used, a lot of unexpected things can happen.
For example, at the top of the box content, add a long box with a height of 100px width to 400px and center.
float float:
Absolute positioning Absolute:
We find that when we add content to the HTML structure, only the absolutely positioned layout is not affected, which is exactly what we need to achieve.
So in the daily selection, the fixed distribution of the layout as far as possible to use positioning (relative/absolute), and floating in the navigation bar and other horizontal layout of the use of more.
Selection of floating float and absolute positioning absolute for the "CSS" layout
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
