float和position一起用是什么效果

2024-09-02

css定位、position与float同时使用的情况

一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位. 2.绝对定位:position:absolute/fixed;元素框脱离普通文档流. 3.浮动:float:left/right;元素脱离普通文档流. 二.对元素同时使用position和float的情况经过实践发现,无论position和float谁写在前面或后面,都是positio

网页布局:float与position的区别

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

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;

CSS之float vs position:absolute

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

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这也是目前使用最多的网页布局方式.不过需要注意

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

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

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

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

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

[译] 关于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盒子模型(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).相邻浮动的块元素可以

css（display，float，position）

float和position一起用是什么效果

热门专题