浮动对span高度的影响

给span加上浮动(float:left),再给他加上行高(line-height:30px;),那么此时span的高度为30px。那么去除其浮动,它的高度就不为30px。为什么呢?暂时没想明白。

span{float:left; line-height:30px;}

首先span是行内元素,其次span是非替换元素,所以不能设置宽高。你float之后,让span成块级元素,所以可以设置宽高。像img,input,textarea,select这些虽然是行内,但是是替换元素,如果是没有设置宽高,那么就是默认宽高,宽高是可以设定的。

float会元素block化,也就是说浮动的元素的displayblock

Span默认是行内元素

感觉你描述的不清楚。
在有line-height:30px;属性的情况下,无论是否浮动,行高始终是30px。
如果是height:30px;在没有float属性的情况下高度属性不管用,行内元素不能设置行高。而加上float,该元素会变成块级元素,高度也就管用了。

inline元素无边界,比如两个span会混成一行,使用由外而内的取高为内容高;可以理解为inlie元素没有边界,收缩到内容边界;如果加上float,非明示指定规则会默认继承inline-block;由于flaot的取块方法,使用的是由内而外的确定边界后取高;

很简单,span是行内元素,对这种元素是不能设置宽高的。但是有2种方式能间接改变它的display:float和position。

光看你这一段CSS不能判断问题 出在哪里,
你写加上 line-height: 30px !important; 试试

  • css浮动问题
  • overflow: visible;文字可以换行,但是A标签直接溢出了,这个怎么处理?
  • table table-layout: auto 设置td 宽度不生效
  • Safari有可以替代FileReader的解决方案吗
  • 内嵌app 的web 页面如何应用 app 内置的静态文件
  • 有没有统计url访问量的系统
  • iconfont 阿里巴巴矢量图标库下载问题
  • 文本框获得另一个文本框的值后如何自动触发js函数?
  • combineReducers这个方法的作用是什么
  • 复选框怎么保存到数据库和从数据库中读出来?
  • 图片加载执行顺序以及控制方法