成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

经验杂笔

分段图

最新文章

经验杂笔
当前位置: 首页 » 大学杂谈 » 经验杂笔 » 网站自适应之清除标签的float浮动

网站自适应之清除标签的float浮动

编辑:狂族晨曦 来源:经验杂笔 日期:2016-04-09 阅读: 824 次 2 条评论 » 百度已收录

Float是我们在设计网站前端的时候,很常用到的一个CSS属性。我们常用它来让DIV等标签贴向左边或者右边。关于Float的用法,大家可以去看看w3school的介绍:

其实Float共有4个用法,我们常用的方法是设置是下面这两种:

float:left;
float:right;

我们在设置不同分辨率CSS样式的时候,可以用float的right来替换left以达到某些设计上的要求,但是我们的要求是多变的。

先森在适配网站自适应的时候,就遇到了设置了左右浮动的标签,在更小分辨率想要将其设置为居中的状态的时候设置不成功的情况,这时先森就想让它的浮动效果清除掉。

清除左右浮动其实也很简单,上文说了Float共有4个用法,除了常用的左右浮动,还有两个用法分别是"none"和"inherit"。从字面意思上就可以看出它们的用法,分别是“没有”和“继承”。

在我们想要将其浮动清除的时候,只需要设置以下属性即可:

float:none;

关于Float的浮动,清除起来还是比较容易。但是关于定位的属性position的定位,如何清除它的影响先森还是没能琢磨的透。网上提出的有两种解决方法,一个是overflow,另一个是clear:both,只能看哪个有用设置哪个了。

网站自适应之清除标签的float浮动

网站自适应之清除标签的float浮动

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共563个字
转载请注明出处来自http://www.capjsj.cn/wzzsyzqcbqd_floatfd.html
已有 2 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
狂族晨曦的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 网扑蜘的头像

    不错,内容很好

    2016-04-11 09:24 回复
官方微信
发表评论 返回顶部