Heim  >  Artikel  >  Web-Frontend  >  CSS布局:浮动与绝对定位的异同点_html/css_WEB-ITnose

CSS布局:浮动与绝对定位的异同点_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:52:261387Durchsuche


浮动 ( float ) 和绝对定位 ( position:absolute )


相同点:(1)都是漂起来( 离开原来的位置 )

(2)并且都不占着原来的位置

(3)另外,如h1包文字的标签,默认只设height的情况下,它的width是铺满父元素的宽度的,而当浮动或绝对定位后,它的宽度就是h1内文字的宽度


不同点:float后,(这里float:left )它后面的对象,会占据它原来的位置,

但是后面对象里的文字和图片等好像知道它在左边,所以他们会自动的在它后面显示,

也就是,后面对象的文字图片等不会被它挡住


position:absolute绝对定位后,它后面的对象,也会占据它原来的位置,

但是后面的对象,完全视它不存在,直接在左上角显示,

也就是,后面对象的文字图片等左上部分会被它挡住


默认情况下(即h3不设浮动、不设绝对定位)




h3设float情况下



h3设绝对定位情况下


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn