`
txf2004
  • 浏览: 7073826 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

display:inline与float:left的正确解释

CSS 
阅读更多

首先我们要明确,display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

  当然这看起来不像是display:inline;与float:left;的区别所在,但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

  那么我们很清楚了,内联(display:inline;)元素不能设置宽高,因为内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高

分享到:
评论

相关推荐

    CSS display:inline和float:left两者区别探讨

    本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...

    有关display:inline-block在FF出现空白的解决方案

    4. **使用浮动布局**:虽然`float:left`或`float:right`不是`display:inline-block`,但它可以实现类似的效果,并且不会受到空白的影响: ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**:...

    display:inline-block的使用示例

    将`.list`元素的`float:left`属性替换为`display:inline-block`,这样每个`.list`元素会像文本字符一样在一行内尽可能地排列,直到没有足够的空间为止。为了防止元素间的空白间隙(由于元素间的空格或者换行符引起)...

    让IE6/IE7支持display:inline-block属性的两种方法

    为了解决这个问题,本文将详细介绍两种方法,使得这些旧版IE浏览器也能正确地处理`display:inline-block`。 方法一:使用`display:inline`覆盖`display:inline-block` 这种方法基于IE6和IE7的一个特性,它们会忽略...

    悬浮广告方法日常收集整理

    .fl{float:left;display: inline;} .fr{float: right;display: inline;} .clearfix{*zoom: 1;} .clearfix:after{ display: block; content: ; height: 0;line-height: 0;visibility: hidden; clear: both;} /*tab ...

    float元素浮动后高度不一致导致错位的解决办方法

    浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-...

    css之display属性之inline-block布局实现详解

    - **不同之处**:`display: inline-block`不会让元素脱离正常文本流,而`float`会。`float`会导致父元素高度塌陷,需要额外的清理方法来恢复。 - **相同之处**:两者都可以实现类似的效果,使元素并排显示。 - **...

    CSS中如何把Span标签设置为固定宽度.pdf

    在CSS中,Span标签通常被用来对文本进行部分样式化,由于其默认的display属性为inline,这意味着它不会占据横向空间,而是与其他inline元素并排显示。然而,当需要为Span标签设定固定宽度时,就会遇到一些挑战,因为...

    IE6下出现双倍margin的解决方法

    - 元素设置了`margin`属性,例如`margin-left:15px;`。 **具体表现:** 假设一个类名为`ILeft`的元素定义为: ```css .ILeft { float: left; width: 150px; margin-left: 15px; } ``` 在IE6下,该元素左侧的...

    ff浏览器下兼容height:auto的问题

    margin-left:5px; float:left; display:inline"> <div style="width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left; display:inline"> <div style="width:50px; height:40px; border:#...

    解决浏览器兼容问题的CSS语法技巧大全.doc

    解决方案是在这个 div 里面加上 `display:inline;`。例如:`#imfloat{ float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再理解为 5px*/}` 3.浮动 IE 产生的双倍距离 IE 浏览器中,浮动元素会...

    关于label和span设置width无效问题解决方法

    在默认情况下label、span 设置width 是无效的。一般要display属性 复制代码代码如下: display:... float:left; 但是一定要在后面的div里面加上 复制代码代码如下: clear:both; 不然会影响到后面的div板式会乱。

    div-css-漂亮的导航条

    float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...

    div CSS技巧

    div使用css的总结,很不错的吆 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px;...float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

    项目笔记项目笔项目笔记记

    - 使用 `display:flex` 或 `display:grid` 替代 `float` 和 `display:inline-block`。 ### 3. CSS 布局示例 以下是一个具体的 CSS 布局示例,用于实现导航栏的设计: ```css #nav { width: 867px; height: 51...

    最全前端面试题-2.2(浏览器兼容问题篇-上百篇题集整理1个月).doc

    - **行内元素`display:block`后的`float`布局间隙**:在IE6中,设置`display:block`并使用`float`的行内元素间会有间距,可使用`float:left`和`display:inline`配合消除。 - **最小高度`min-height`不兼容**:IE6-...

    2016年度最全整理浏览器兼容性问题与解决方案

    解决策略是同时添加`display:inline`和`display:table`,如`.inlineBlock {display: block; display: inline; display: table; margin: 10px;}`。 问题五:图片默认存在间距,即使使用了通用样式`*`也可能无法消除...

    css(display,float,position)深入理解

    left:设置对象浮在左边 right:设置对象浮在右边 浮动的目的: 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性 1.任何申明为 float 的元素自动被设

Global site tag (gtag.js) - Google Analytics