CSS布局：浮动与绝对定位的异同点

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

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

（2）并且都不占着原来的位置

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

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

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

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

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

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

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

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

h3设float情况下

h3设绝对定位情况下

时间： 2024-04-25 12:08:02

CSS布局：浮动与绝对定位的异同点的相关文章

CSS布局浮动和定位属性的区别

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果. position: absolute|relative; 要配合top,left等定位; 使用: position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱

百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/

DIV+CSS布局(三)

1.float浮动属性 left左浮动   right右浮动 2.clear 清除浮动 clear:both 3.overflow  溢出处理 hiddle 隐藏超出层大小的内容 scroll 无论内容是否超出层大小都添加滚动条 auto 超出时自动添加滚动条 eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

CSS div和css布局

一.div和span DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 DIV和span的区别在于,span是内联元素,div是块级元素.div占用整行,span只会占用内容大小的部分.div可以改变size,span不可以改变size 二.盒模型 margin 盒子外边距,增加的话,内盒大小不会变 padding 盒子内边距,增加的话,border向外扩大,内盒大小本身不会变 border 盒子边框宽度 width 盒子宽度 height 盒子高度 三.布局

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

css 浮动和绝对定位的区别

当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时). 绝对定位使元素脱离文档流,因此不占据空间.普通文档流中元素的布局就当绝对定位的元素不存在时一样.因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素. w3c对绝对定位的解释: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

CSS基础学习十八：CSS布局之浮动

CSS布局中说到定位就不得不提浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动 框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 一float属性的定义和用法 float属性:设置元素浮动 可能的值: none 不浮动,在文档流内,默认 left  左浮动,脱离文档流 right 右浮动,脱离文档流 inherit 规定应该从父元素继承 float属性的值. float属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文

css浮动与绝对定位的关系

人还是要学会思考.我初学css时候,老觉得浮动与绝对定位的功能很类似,原因很简单,因为他俩都能使正常html元素脱离元素流. 相对于绝对定位强悍的功能,浮动其实并没有完全脱离元素流,这个后面会说. 那么什么是脱离元素流呢?要搞清楚这个问题,首先得了解什么是元素流.我的理解,元素流是html标签本应该出现在页面的位置,比如下面这段代码. 1 <div> 2 <p class="p1">p1</p> 3 <p class="p2"