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

css float:left 认识误区

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

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

相关推荐

    6个盒子的CSS代码变换

    .b1{ float:left;width:290px; height:300px; margin-right:10px} .b2{ float:left; width:290px;height:300px; margin-right:10px} .b3{float:left;width:340px; height:300px;margin-bottom:10px} .b4{float:left;...

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

    在CSS布局中,使用float属性进行元素的左右对齐是一种常见的方式。然而,在实际应用中,有些开发者会遇到同时使用float:left和float:right时,元素无法对齐在同一水平线上,而是出现换行的问题。本文将详细介绍几种...

    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%; }

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

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

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

    当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display...

    div-css-漂亮的导航条

    <style type="text/css"> body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px...

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

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

    jQuery实现居于左侧的弹出菜单

    float:left;} .btn1{ display:block; border:none; cursor:pointer; float:left; background:url(../images/slide-button-active.gif) no-repeat; width:43px; height:117px; text-indent:-999em; outline:none;} ....

    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)。使用浮动需要注意的是如果浮动的...

    css 跨浏览器实现float-center.docx

    在CSS布局中,浮动(float)属性主要用于创建多列布局,通常我们使用的浮动方式是`float:left`或`float:right`,但这两种方法并不能直接实现元素的居中对齐。标题提到的“css 跨浏览器实现 float:center”实际上是指...

Global site tag (gtag.js) - Google Analytics