1、同级存在浮动，如mid的前面left浮动(mid不浮动)，margin则相对于父元素，mid的margin-left不是相对于left,而是相对于con（可以想象，如果left不浮动，则mid和left不在同一行，margin的参考对象自然是父元素）。但是如果margin-left的值小于left的宽度，是不起作用的(mid的宽度等于父容器宽度减去左右margin，浏览器查看元素是起作用的，ul会掉到最下面)，mid和left会紧靠在一起。

2、margin-left和margin-right相当于给元素定宽（不是显示定宽，比如如果元素内没有内容，宽度是0，当内容是连续数字或字母也起不到定宽的作用）。

3、 float会使行内元素转为行内块元素，width会起作用。

4、mid如果也加上左浮动，并且不设置宽度，margin-left和margin-right会限制mid的宽度，但是mid不会和left在同一行，尽管left右边还有足够的位子。

关于float和margin的更多相关文章

  1. global,$GLOBALS[' '] 全局, 浮动float跟margin的注意事项

    $a; global只能声明变量为全局,不能赋值,否则报错未定义:global $a; 相对于$GLOBALS['a'],写法是这样的,所有定义过的变量都存在这里: //浮动float跟margin的 ...

  2. CSS中的float和margin的混合使用

    在最近的学习中,在GitHub上找了一些布局练习,我发现了我自己对布局超级不熟悉(很难受). 在以前的学习中,感觉使用CSS就记住各个属性的功能就OK了,但是呢?真的很打脸.不说了,太伤心了,进入正题 ...

  3. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  4. 定位之float 同一父元素的float相互影响，float是margin盒子在父元素的padding盒子内

  5. margin双边距的问题

    margin:20px;height:20px;float:left margin:20px;height:20px;float:left

  6. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  7. 深入理解BFC和外边距合并(Margin Collapse)

    一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...

  8. 图片垂直居中 和 float

    //图片垂直居中, display:table-cell; vertical-align:middle;   不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...

  9. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

随机推荐

  1. 将数据从MySQL迁移到Oracle的注意事项

    将数据从MySQL迁移到Oracle的注意事项1．自动增长的数据类型处理MYSQL有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值.ORACLE没有自动增长的数据类型,需要建立一个自动 ...

  2. 在Package中处理 bit column

    SQL Server没有boolean类型,使用bit 类型来代替,bit类型有两个值:0 和 1. SSIS package中有boolean类型,SSIS自动将bit 类型转换成boolean类型 ...

  3. Create views of OpenCASCADE objects in the Debugger

    Create views of OpenCASCADE objects in the Debugger eryar@163.com Abstract. The Visual Studio Natvis ...

  4. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ScrollView中嵌套GridView，ListView只显示一行的解决办法

    转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...

  6. ECMAScript5之Array

    在ECMAScript5中对Array新增的些方法,以前没注意的同志们,嘻嘻,下面我们一起来边看边学. 1.Array之isArray(element) 看到isArray,不言而喻,就是判断一个对象 ...

  7. C#：根据银行卡卡号判断银行名称

    原文地址:android 根据银行卡卡号判断银行 原文是 java ,现在将它翻译成 C# ,并对代码重新编排整理,博主是一个今年刚出来的应届毕业生,不足之处请多多包涵. 根据银行卡号判断所属银行,依 ...

  8. 2014 Visual Studio Contact(); 直播笔记

    昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS)和Visual Studio免费(Visual Studio ...

  9. 基于DDD + SD.Framework实现的统一身份认证系统

    项目地址 http://git.oschina.net/lishilei0523/ShSoft.UAC 项目说明 本项目开发的目的有三: 1.作为一个使用SD.Framework框架开发的项目样板 2 ...

  10. JS详细教程（下）

    五.数组 数组是数据的有序列表,每个元素在数组中都有数字位置编号,也就是索引.JS中的数组是弱类型,每一项都可以保存任何类型的数据. 创建数组 ①使用Array构造函数 var arr=new Arr ...