位置: 编程技术 - 正文

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

  • 湖南省增值税发票图片
  • 税收管辖权是什么的重要组成部分
  • 航天金税财务软件使用说明
  • 公司年末报表
  • 公司股东和自然人股东可否代持股权
  • 科技公司技术服务费计入什么科目
  • 对公账户是不是实时到账
  • 固定资产装修费用计入房产税吗
  • 财务报表提示未审计
  • 交易性金融资产入账价值怎么计算
  • 企业清算的所得税处理包括哪些内容
  • 发票现金支付的做账增值税
  • 拿到发票后如何处理
  • 付款金额比发票金额少怎么办
  • 展厅出租或招商
  • 事业单位其他应付款贷方余额表示什么
  • 新建账套应收账款怎么填客户
  • iphone手机腾讯视频怎么取消自动续费
  • 金税三期里有员工无工资如何申报?
  • 房产税免收范围包括
  • 关于金融行业的经典句子
  • 税务行政强制行为遵循的原则
  • 利润弥补以前年度亏损是税前吗
  • 新办企业注册资本和投资总额
  • 土地增值税允许扣除的评估价
  • 劳务和工资合并扣税吗
  • 税控盘逾期未抄报,交罚款需要带什么
  • 三个点的专票要交多少税
  • 非金融类企业的货币资金主要包括哪些内容?
  • 王者荣耀中如何隐藏贵族标志
  • 印花税是按开票金额还是收入
  • 施工机械保险费属于什么费用
  • 出口企业增值税怎么算
  • php实战
  • laravel视频教程
  • 如何申请办理港澳通行证
  • 滚动开发项目如何做账
  • 购买办公用品入库如何做账务处理
  • 可视化大屏技术
  • php错误和异常
  • php array_slice 取出数组中的一段序列实例
  • 公办学校的会计
  • 研发费用的范围和加计扣除比例
  • 差旅费报销范围包括
  • 弥补以前年度亏损怎么算
  • 个税申报密码重置多久能用
  • 水利基金可以不计提吗
  • 法人可以领退休金吗
  • 好用的测试工具
  • 公司优秀党员奖章
  • 固定资产减少处理
  • 电影卡购买
  • 红字发票异常处理什么意思
  • 房租没有发票如何交税
  • 交通费用报销明细表
  • 银行回单超过三个月可以补打吗
  • 关于端午节福利发放的通知(通知公告)
  • 支付宝企业账户在哪里查看
  • 公司卖土地怎么避税
  • 企业借款的利息交增值税吗
  • 资金会计应当设置的科目
  • 会计备注一般写什么
  • sqlserver索引语句
  • xp系统经常未响应怎么办
  • 如何安装vmware10
  • win10系统锁屏后输入密码一直转圈进不去桌面
  • 企业级路由器和普通路由器区别
  • linux cat 命令
  • Win10系统照片应该打不开
  • windows 打开文件命令
  • window10邮件
  • quick-cocos2d-x如何在mac下编译安卓版本
  • css做一个好看的网页
  • 插入排序_Python与PHP的实现版(推荐)
  • Android studio DrawerLayout
  • js类的实现
  • 付了120救护车费怎么报销
  • 购买方销售方什么意思
  • 昌吉市税务大厅
  • 个体户 零申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设