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

css float:left 认识误区

阅读更多
今天改界面,把原来用table的一段代码改成了div,出现了一个问题,解决后发现自己的原来认为的常识并非正确,在此提醒自己,对盒模型后面要深入了解一番。

原先是一个table,有两行,第一行4个元素,第二行2个元素(确认和取消按钮)。
改成div是,一行一个div,第一行放4个div,第二行放两个div;
第一行的4个div都加上了style="float:left"
结果第二行的确认按钮是跟在第一行,取消按钮是在第二行。
却掉第一行第四个div上style="float:left"后,显示正常。
我以前以为float:left表示当前div往左贴在前面一个块上,现在看上去是指后面一个块,贴在自己的右边。
分享到:
评论

相关推荐

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

    在CSS布局中,`display:inline` 和 `float:left` 是两个重要的属性,它们分别用于不同的布局策略,但有时也会一起使用以实现特定的设计效果。下面将详细解释这两个属性的含义和区别。 首先,`display:inline` 是一...

    css float left布局换行不正常问题的解决

    在讨论CSS中float布局换行问题之前,首先要了解CSS float属性的基本原理。float属性是一种非常有用的CSS布局方式,它允许元素向左或向右浮动,直到它的外边缘碰到包含框或另一个浮动元素的边框为止。使用float属性...

    css中float:right右对齐元素会换行不在同一条线上

    第二种解决办法:给左边也加上float:left。 CSS float定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个...

    DIV+CSS布局:CSS浮动float属性详解[归纳].pdf

    CSS浮动float属性详解 在Web开发中,布局是非常重要的一方面,浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握,我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...

    IE7 float:left左浮动失效的解决方法

    在网页布局设计中,`float` 属性是一个关键的CSS技术,它允许元素在容器内浮动,以便创建多列布局或者让文本环绕图像。然而,不同的浏览器可能对CSS的解析存在差异,导致某些样式在特定浏览器下表现不一致。本文将...

    css float浮动属性使用方法和实例讲解

    Css的float浮动属性,用于设置标签对象(如:标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动靠左(float:left)和浮动靠右(float:right)。 float的作用:通过css定义float...

    divcss布局:CSS布局方法介绍

    **float属性**用于指定元素的浮动方向,它可以有三个值:`none`、`left`、`right`。 - `none`: 默认值,对象不浮动。 - `left`: 文本流向对象右边。 - `right`: 文本流向对象左边。 通过float属性可以实现简单的两...

    css如何让浮动元素水平居中

    对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的... float:left; position:relative; left:50%; } p{ float:left; position:relative; right:50%; }

    float:left的对象(导航)如何居中示例探讨

    在进行网页布局时,浮动(float)是一种非常重要的CSS布局技术,它能够让元素脱离文档流,并且向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘为止。这种技术在创建导航栏时尤其常见,通常我们会给...

    CSS中右对齐float:right换行的解决办法

    是不是很多朋友在应用FLOAT左右的时候也出现这个问题,下面给出几种常用的解决方法,希望对出现这样问题的朋友有所帮助哈。 第一种解决办法:把左右对换,比如吧日期放在标题的前面,我朋友就是那个问题,对调以下...

    css float属性_动力节点Java学院整理

    浮动(Float)是CSS布局中的一个关键概念,它主要用于创建多列布局和控制元素的排列方式。`float`属性允许元素在文档流中浮动,从而影响周围元素的布局。本篇将详细介绍`float`属性及其在页面布局中的作用。 ### 1....

    div+css float 布局,适配手机

    在这个特定的案例中,“div+css float 布局,适配手机”指的是利用 CSS 的浮动属性 (`float`) 来创建响应式网页布局,以便在手机等移动设备上也能正常显示。 浮动布局(float layout)是 CSS 中一个经典但仍然广泛...

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

    .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 ...

    [前端案例03]六个css动画相关案例

    1.去除超链接下划线:text-decoration: none; none : 无装饰 underline : 下划线 line-through : 贯穿线 overline : 上划线 ... float: left; } .right{ float: right; } .center{ margin

    CSS浮动属性Float详解 什么是CSS Float?

    CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...

    CSS清除浮动float的三种方法小结

    float常跟属性值left、right、none float:none 不使用浮动 float:left 靠左浮动 float:right 靠右浮动 二、浮动的用途 可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。使用浮动需要注意的是如果浮动的...

    IE6 float:left margin-left出现两倍像素

    其中一个被广泛讨论的问题是当元素应用了浮动属性(float:left)并设置左侧边距(margin-left)时,这个边距值会被错误地加倍。这个现象通常被称为“IE6双空白边bug”。 要深入理解这个问题,首先需要知道CSS中的浮动...

    初写静态网页

    float: left; } /*专家团队*/ .showtTitle { width: 455px; height: 70px; padding: 0; margin: 0 auto; } .tcontain { width: 120px; height: 3px; padding: 0; margin: 62px 0 5px 0 ; float: left;...

    DIVCSS布局:CSS浮动float属性详解.doc

    浮动(float)属性是CSS布局中的一个关键特性,主要用于创建流式布局、多列布局以及解决元素定位问题。在传统表格布局中,我们依赖表格的对齐方式来组织内容,但在Web标准开发中,浮动属性成为了实现灵活布局的核心...

Global site tag (gtag.js) - Google Analytics