位置: 编程技术 - 正文

CSS中Float(浮动)相关技巧文章(cssfixed中浮动)

编辑:rootadmin
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的。   如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的(我只是猜想)。如果你知道这些bug,你就能避免这些问题。   让我们尝试去解决这些问题并澄清一些以前使用浮动的误解。我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的问题。 What You Should Know About Floats ------------------------------------------------------------------------------------------------------------   “关于图文围绕的实践可以追溯到很久很久以前。这也就是为什么从Netscape1.1开始这个功能被引入浏览器,以及为什么CSS使用浮动属性来实现它。‘Float(浮动)'这个术语引用自伴随Netscape1.1一同发布的‘Additions to HTML 2.0'文档,描述一个元素浮动至某一侧并停下的表现方式。”   “浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。”   “元素浮动后将自动转为块级元素。该元素可以被移动至当前行的左侧或右侧。属性如下:float: left, float: right or float: none”   “你应该为所有的浮动元素设定宽度属性(除非是<img>元素,因其具有隐含的宽度)。如果不设定宽度,结果将是不可预知的。”   “举例来说,浮动元素应该定义宽度属性,不论是显式指定的还是隐含的。另外,它会尽可能的水平的填充容器元素,就像非浮动内容那样,不给其他内容空间以围绕它们。其次,和正常文档流中的元素不同,浮动元素的垂直边距(margin)不会叠加。最后,浮动元素可以和临近在正常文档流中块级元素重叠(译注:浮动元素不占任何正常文档流空间,所以建议不要理解成重叠,而是腾空浮动的概念。)。”   “首先我们要牢记的一件事情是,浮动元素只能浮动至左侧或者右侧,没有浮动至中间一说,这是很多新手容易范的错误。记住,最基本的规则,浮动元素只能浮动至两侧。”   “当我们让一个元素浮动,它会往右或者往左浮动直至遇到容器的边缘。如果我们向同一方向再浮动一个元素,它会浮动直至碰到前一个浮动元素的边缘。如果我们浮动更多的元素,他们将一个挨一个排列,但不久就会空间不足,当该行已经无法容纳更多的浮动元素,则下一个浮动元素会换行继续排列。”   Containing blocks or containing boxes:“容器元素是指包含其他子元素的行级或块级元素。。。。”     “当明确指定时,浮动元素垂直位置由它原先在文档流中的位置决定,顶端与当前行顶端对其。但是水平方向上,它尽可能远的向容器元素边缘移动,但是仍遵循容器元素的填充距离(padding)。同行的行内元素则围绕浮动元素排列。”   “由于浮动元素不占据正常文档流空间,所以浮动元素前后那些未明确指定位置的块级元素会占据浮动元素本来应该处在的位置,就好像它从来不曾存在过。而浮动元素之后的那行会根据浮动元素缩小宽度。浮动元素之前的元素则会重新被排列,占据独立的一行。(译注:ie 和 ff 在这种情况下的表现不尽相同)”   “如果当前行的水平方向上没有足够的空间容纳浮动元素,则向下一行,直至有能容纳该元素的行。”   “任何浮动元素都不可能超过原来所处文档留位置的上边界。浮动元素的顶端必定和当前行顶端对齐(或者在没有当前行元素时和前一个块级元素底部边缘对齐)。”   “想要真正理解浮动理论,你必须明白在CSS中什么是行 (line box)。不幸的是,为了解释什么是行,你必须先明白什么是行级元素。行级元素指的是那些非块级元素,例如<em>而行是一个逻辑上的概念,是一个虚拟的矩形,包含了组成该行的所有行级元素,其高度至少等于这些行级元素中最高的那个。”   “如果我们将Div中所有的列都加上 float: left 它们会挨个向左排列,如果我们希望在页面底部有一个页脚,并不需要一个最长的列,只要加上 clear: both 就可以了”   “使用浮动元素包含浮动元素这样的布局方式有一个潜在的缺点,即你的页面是否能够一直保持一致的展现效果将取决于浏览器的实现是否保持一致。特别是当浮动元素是一个更为复杂的布局中的一部分的话,将变得更加不堪一击。” Clearing the floats ------------------------------------------------------------------------------------------------------------   “浮动元素之后的元素会自动围绕该浮动元素。如果你不希望这样,你可以为这些元素应用‘clear'属性。该属性有4种设值:clear: left, clear: right, clear: both or clear: none”   有很多技巧可以做到清理浮动元素,但不引入额外的无语义标签。下面3种是比较常见的做法: a) 将容器元素一起浮动 b) 在容器元素上使用 overflow: hidden c) 使用:after这样的css伪类。   “插入一个清理元素是使容器正确包裹所有浮动元素的标准做法,这样做具有将容器底部边缘‘拖拉'以包裹所含元素的效果。”   “对于基于浮动设计的布局来说,一个常见的问题就是浮动元素的容器不会自动伸展来包含浮动元素。如果你希望在所有的浮动元素的外面加上边框(例如,在容器元素上加上边框),这样你必须显示的命令浏览器来伸展容器。你可以是用overflow method方法。”   使用:after 想像一下我们使用:after来插入一个点号,并且设置它的属性{clear: both;}。这就是所有你需要做的事情,但是没有人会接受容器底部有那么一丝空隙,所以我们还要设置{height: 0;} 和 {visibility: hidden;} 来保证严丝合缝。

推荐整理分享CSS中Float(浮动)相关技巧文章(cssfixed中浮动),希望有所帮助,仅作参考,欢迎阅读内容。

CSS中Float(浮动)相关技巧文章(cssfixed中浮动)

文章相关热门搜索词:css浮动的应用原理,css浮动的用法,css 浮动,cssfixed中浮动,css浮动的用法,css语言中浮动的语法,cssfixed中浮动,css浮动的用法,内容如对您有帮助,希望把文章链接给更多的朋友!

惊现学习CSS应该注意的方法 学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法!要想掌握CSS,首先要学会HTML,我刚开始是从零开始学习的,花了一个月

使用text-align:justify实现两端对齐一例 text-align:justify只能对多行中的非最后一行进行两端对齐。对于单行自己没办法,IE有text-justify可以解决问题,对了非IE的我的方式比较垃圾,因为只在特

CSS整体布局声明的一些使用技巧 我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化、提高运行效率提供了途径。我们列举比较常用的形式,并加上解释。整体布局声明

标签: cssfixed中浮动

本文链接地址:https://www.jiuchutong.com/biancheng/375144.html 转载请保留说明!

上一篇:CSS的margin边界叠加深度剖析图文演示(css中边界margin的多种定义方法)

下一篇:惊现学习CSS应该注意的方法(css要学到什么程度)

  • 房产税计入哪个科目 新会计准则
  • 资源税的计税方法自产
  • 出口货物不报关走快递
  • 外币借款业务的会计分录还款时利息
  • 产成品返工如何处理
  • 年末发票
  • 开红字发票如何调整收入?
  • 其他应付款冲销怎么做
  • 物业 免物业费
  • 生产成本里面的工会经费
  • 退货或者销毁处理
  • 财务软件期初数据录入
  • 出口发票税率怎么开
  • 出售固定资产要做收入吗
  • 转出未交增值税怎么算
  • 税会差异例子
  • 2021年新疆果业灰枣销售情况
  • 电话充值卡如何变现
  • 环境工程开票多少税率
  • 货物出口被海关查
  • 防洪工程维护费取消
  • 水电费计提和冲销
  • 跨年补计提工资汇算清缴
  • 结转出租包装物的成本
  • 企业确定无法支付的
  • 转账支票用途可以写劳务费吗
  • 1697508581
  • 给已经注销的公司退款
  • php curl post请求
  • php字符串赋值
  • aliapp.exe是什么意思
  • 实物折扣例题
  • vue前端开发规范
  • 施伦贝格尔
  • php在线阅读器源代码
  • 前端页面默认字体
  • 代理买卖证券款属于什么科目
  • 如何认定为软件企业
  • cpu和gpu性能对比
  • 微信支付开发包
  • 第二季度企业所得税会减第一季度吗
  • 非营利组织会计就是用于确认、计量
  • 冲红怎么做会计科目
  • 增值税预缴的计税依据
  • 一般纳税人增值税申报操作流程
  • 预付卡充值入什么科目
  • 建账要求
  • 某劳务派遣公司与某传媒公司签订
  • 没有水电费发票可以入账吗
  • 其他应收款的认定
  • 暂估应付账款余额在贷方
  • 如何更换会计账号
  • 深度Win7 64位系统默认输入法图标如何个性化设置
  • 的四个步骤
  • 本地硬盘满了怎么办
  • 如何解决cpu超频问题
  • mac如何修改hosts登录Googledrive
  • winxp软件双击后没有反应
  • xp系统在新建账户怎么弄
  • 苹果发布首款MR头显
  • win102020h2版本
  • win7系统浏览器打不开网页怎么办
  • win10正式版和专业版的区别
  • WIN10企业版安装NET3.5
  • javascript零基础
  • jquery移动节点的方法
  • javascript运行环境有哪些
  • shell的逻辑运算符
  • vue router routes
  • jquery的css样式
  • mongorestore报错
  • 使用GeoPainter一步一步布置场景
  • JavaScript中的数据类型分为两大类
  • Metaio in Unity3d 教学--- 一. 搭建环境,运行官方案例
  • android documents
  • js调用声音
  • python编写简单的计算器加减乘除
  • 国家税务总局党建工作局
  • 国考报四川的去哪考
  • 个人的车租给公司保险可以入账吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设