位置: 编程技术 - 正文

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要学到什么程度)

  • 应交税费借方余额0.01怎么调整
  • 印花税需要计提吗?怎么做会计分录
  • 个人所得税手续费返还要交企业所得税吗
  • 发票同步功能在哪里
  • 债权投资借贷方向是什么一年内的
  • 支付宝支付高速公路发票怎么打印
  • 中介公司报税怎么操作
  • 结转完工产品生产成本会计科目
  • 公章更换后需要到工商局备案么
  • 电子发票红字发票怎么开
  • 过期的费用发票怎么处理
  • 企业发放员工工资
  • 委托加工几个点
  • 调整交易性金融资产
  • 计提营业账簿印花税怎么做账
  • 没有建筑资质能办安全生产许可证吗
  • 咨询费 税
  • 误餐补助需要发票做账吗
  • 以前年度的税金及附加
  • 国家税务局定额发票验证
  • 税控盘怎么使用
  • 购买标书的费用计入什么科目
  • 项目自筹资金是什么意思
  • 应收账款抹零会计分录
  • 工程施工余额怎么处理
  • 房屋租赁公司要交哪些税
  • Excel规划求解怎么做
  • 开具红字发票信息表对方未接受到怎么办
  • 出口视同内销的账务处理?
  • Win10 Build 21354 太阳谷ISO镜像版体验报告 含下载地址
  • php 多维数组转换成字符串
  • php版本常用的排版软件
  • 撤销银行账户
  • win7指定程序用指定网卡
  • 开出转账支票补付款项
  • 购销合同印花税税率表
  • 固定资产一次性扣除申报表怎么填
  • uniapp打包成h5如何调用原生
  • 巴尼奥斯附近的阿格杨瀑布
  • vue项目引入ts
  • vue 插槽详解
  • ai运行环境
  • 配件出口可以退税吗
  • 个税赡养老人专项扣除 多人
  • 实收资本资本公积印花税怎么申报
  • 财务没有及时缴费怎么办
  • 出资比例不等于100%
  • 实行核定征收印花税
  • 公司能经营烟草公司吗
  • 营业执照变更需要本人到场吗
  • 在税收方面属于什么领域
  • 扣缴个人所得税报告表
  • 公司既没有收入怎么办
  • 结转损益不平是什么原因造成的
  • 成本费用占营业收入比重
  • 员工的车是否可以抵税
  • 工程款打入个人账户扣税吗
  • 买别人的银行卡是啥罪
  • 累计折旧怎么算出来
  • 帐簿凭证的管理方法
  • mysql不能写入中文
  • winxp cmd
  • 正确使用气体钢瓶的原则
  • freebsd做服务器
  • 老毛桃2013 U盘启动盘和重装系统图文教程
  • 如何解决win10系统用户名有中文
  • mac装双系统后无法开机
  • manager是啥
  • explorer.exe进程文件
  • linux重启shell
  • 如何解决win7系统中鼠标键盘不能用
  • windows7怎么解除密码
  • windows wps
  • 详解16型人格
  • linux shell 字符串转数字
  • jQuery on绑定的事件
  • jquery 点击按钮
  • 安卓中的多线程
  • 长沙房产税如何征收
  • 辽宁省疫情期间工资发放标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设