CSS layout: Similarities and Differences between float and absolute positioning, and between css layout float

Source: Internet
Author: User

CSS layout: Similarities and Differences between float and absolute positioning, and between css layout float


Float and absolute position (position: absolute)


Similarities:(1) They all float (leaving the original location)

(2) and do not occupy the original location

(3) In addition, for example, if the label of the h1 packet text is set to height by default, its width is full of the width of the parent element. When it is floating or absolutely positioned, its width is the width of the text in h1.


Difference: After float, (here float: left)The object after it occupies its original location,

But the text and images in the following objects seem to know that they are on the left, so they will be automatically displayed behind them,

That is, the text images of the following objects will not be blocked by it.


Position: After absolute is absolutely positioned,The object after it also occupies its original location,

But the following object does not exist. It is directly displayed in the upper left corner,

That is, the upper left part of the text image of the subsequent object will be blocked by it.


By default (that is, h3 does not have float or absolute positioning)




When h3 is float



When h3 is absolutely positioned


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.