【float和position谁好？】的更多相关文章

CSS传统布局之display属性+float属性+position属性

这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下css布局模型这篇文章. 一.display属性 The display property specifies the type of box used for an HTML element. display属性是与盒模型紧密相连的属性,大多数情况下定义了元素是block-level,inline-…

float和position谁好？

float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.不过需要注意的是清除浮动是我们可能需要注意的地方.而position顾名思义就是定位.他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位).其中static和relative会占据文档流空间,他们并不是脱离文档的.absolute和fixed是脱离文档流的,不会占据文档流空间.比较可以发现,fl…

CSS布局模型学习(Float、Position、Flexbox)

一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮动的方法: * 为父元素添加overflow:hidden,这样父元素就有高度了 ,父元素的高度便不会被破坏: * 浮动父元素 * 通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性. * (推荐)——clearfix—— .clearfix { *zoom: 1;…

inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题

我们知道内联元素是不能设置宽.高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素. 例1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>floattest</title> <style> div.wrap { width: 500px; height: 300px; m…

CSS 盒子模型及 float 和 position

## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型:W3C 标准和模型和 IE 盒模型(怪异盒模型) W3C 标准盒模型:属性 width 和 height 只包含 content,不包括 border 和 padding IE 盒模型:属性 width 和 height 包含 border 和 padding,指的是 content + paddi…

CSS 中，用 float 和 position 的区别是什么？

CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果.float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切.float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.并且float这也是目前使用最多的网页布局方式.不过需要注意…

float与position间的区别

float与position间的区别:    个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流,不脱离文本流)    float的两种功能作用:        a.元素脱离文档流,但不脱离文本流.(即:该元素区域浮动起来,但是处于元素里面的文本信息不会脱离文档)        b.当行内元素使用float浮动时,类似于将该元素设置为行内块级元素,可以为其设置宽高并在一行显示.    示例代码如…

float和position:absolute脱离文本流的区别

float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. 需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这…

[转][译]关于CSS中的float和position和z-index

原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要更复杂的排版要求,可以考略使用其他方法,比如使用相对定位和绝对定位. 在这篇文章中,我们首先要讨论元素浮动:然后,我们要讨论如何使用x,y和z轴控制元素的位…

CSS：布局的三个关键属性：float、position、display

最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子,看的是一头雾水.最终决定自学CSS. 在网上下载了一本电子书<CSS权威指南>第三版.用了3个钟头看完了这本书.看的时候专拣不知道的看.譬如CSS选择器(这些了,以前就知道,并且使用jQuery就是用的CSS的选择器).盒子模型了等,所以这些就不看的.另外在学习时,根据CSS参考手册(下载网址:h…

网页布局:float与position的区别

网页开发中布局是一个永恒的话题.巧妙的布局会让网页具有良好的适应性和扩展性.css的布局主要涉及两个属性——position和float.它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明显的.下面和大家分享一下我的学习心得. 首先,先介绍一个很重要的概念“文档流”,明白了这个概念之后就很容易理解position和float的定位原理了. 在css中有一个z-index属性,因为网页是“立体的”,它有z轴,这个z轴的大小就由z-index控制.默认情况下,所有页面元素均位于z-ind…

css（display，float，position）

display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否浮动显示 float : none | left | right none:设置对象不浮动 left:设置对象浮在左边 right:设置对象浮在右边 浮动的目的: 就是要打破文档流的默认显示规则.如果要让元素按…

float与position

使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下)  这是当然的  我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦  至于高度 不论有没有float 高度默认都是包裹元素的 有这么一道题 现有并列的三列布局结构,从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px.要求在不改变 Html 结构的情况下用CSS实现:ABC,CBA,BAC 三种布局及在CBA排列下使B宽度自适应(三列总宽度100%),不能使用针对浏览器的…

CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(style属性) >id选择样式(#获取) > 属性选择 ([title="da"]) > 标签选择 div p > 通配符* 2. 同一等级优先级具有叠加性.div p的优先级大于p.相同优先级,越晚设置的样式优先级越大 3. 绝大部分样式会从父元素继承到子元素上,继承…

css中的float和position

1.float <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> body{ border-style:solid; border-size:3px; } .div1{ width:100px; height:100px; background-col…

float和position

float float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute 但absolute其实已经不能算是欺骗父元素了,而是出现了层级关系. 如果处于正常的文档流中的父元素算是凡人的话,那absolute已经得道成仙,用现在的话说已经不在一个次元上. 如图:从父元素的视点看,设成absolute的图片已经完全消失不见了,因此从最左边开始显示文字.而absolute的层级高,所以图片遮盖了文字. <div s…

脱离文档流两操作，float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位.需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围.而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它. float时: <html> <…

[浅谈CSS核心概念] CSS布局模型：float和position

1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布 内联元素都会在所处的包含元素内从左到右水平分布显示   2.层模型 如上图,网页呈现的内容,就像PS中的图层一样,是多层重叠呈现的效果,当然,一般情况下我们的网页只有一层,因为任何元素在默认情况下是不能浮动的.但是脱离了"普通流"…

CSS之float vs position:absolute

补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 position:absolute 作用与float极其类似. 二者都是将自身浮空(垂直于屏幕) -- 其实是将其容器高度塌陷. 不同点在于:float会改变位置,但 position:absolute 则会保存其原有位置!!! 利用 position:absolute 的这个特性,我们可以更好的…

[译] 关于CSS中的float和position

原文 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要更复杂的排版要求,可以考略使用其他方法,比如使用相对定位和绝对定位. 在这篇文章中,我们首先要讨论元素浮动:然后,我们要讨论如何使用x,y和z轴控制元素的位…

css的float和position属性

(1)float的简单用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 200px; height: 50px; background-color: aqua; } .div2{ width: 250px; heigh…

[TimLinux] CSS float和position详解

1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 1.2. 关键点 从上面的定义,分析几个关键点: float是可以独立存在的,与position…

CSS float和position属性

1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的规则进行排列,即浮动元素不会影响紧随着它的块级元素的排列.对于接着浮动元素的行内元素(包块行内块元素),行内元素会环绕在浮动元素周围.浮动元素默认是行内块级元素,相邻浮动元素之间的元素排列也符合标准文档流.在CSS中,任何元素都可以设置成浮动元素. 特点 行内元素环绕 脱离标准文档流 默认属于行内块…

505，display，float，position之间的关系（有疑问）

(display属性设置元素如何显示) 如果display取值为none,那么position和float都不起作用,这种情况下元素不产生框 否则,如果position设置框是绝对定位,float的计算值就为none,display根据下面的表格进行调整 否则,float不是none,框是浮动的,display根据下表进行调整 否则,如果元素是根元素,display根据下表进行调整 其他情况下,display的值是指定值 总之:绝对定位,浮动,根元素都需要调整display…

CSS盒子模型(boeder)+浮动(float)+定位(position)

盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 =  内容的宽(width) + 左内边距 + 左边框 + 右内边距 + 右边框 注意:(1)内边距撑大盒子宽高,   限制某个盒子宽高,  添加内边距,  宽,高,相应的减去内边距 (2)垂直方向的外边距合并: (外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.    合并后的外边距的高度等于两个发生合…

HTML+CSS教程（六）浮动-float+定位-position+居中问题

一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置.2.浮动的概念:所谓的浮动就是指元素脱离文档流,漂浮到文档流的上方,不会占据位置.3.浮动的特性:(1).浮动元素有左浮动(float:left)和右浮动(float:right)两种.(2).浮动的元素会向左或向右浮动,碰到父元素边界,浮动元素,未浮动的元素才停下来.(3).相邻浮动的块元素可以…

关于float和position

  在div 块级元素中,一般我们的div块都是流式的,如果你设定一个div,接下来的div就会另起行,也就是块级元素的定义 但是一般排版不是这样的,最典型的应该就是这种布局了,那么中间的那三个div块,就是float的效果了         首先一个简单的例子     这个就是典型的div块分布(有三个div) 然后如果在float2加上float:left的话,效果就会变成下面这样 float使你设置的元素脱离了父级元素(本来这里float2是最大的div的子级元素)     float的属…

float和position的使用

http://blog.csdn.net/yaodebian/article/details/58621183…

对CSS中的Position、Float属性的一些深入探讨

对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Position.Float属性交叉使用上面的影响 Position.Float属性使用上的小技巧…

css position, display, float 内联元素、块级元素

position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的顺序渲染 absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位 fixed:元素相对于浏览器window进行定位 relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离. float属…