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

  2. struts.xml的编辑

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  3. SSRS3： Credentials配置

    1,Service Account Service Account 是Reporting Service 运行的账户,可以通过查看Windows 的 Service 来查看,强烈建议使用 Report ...

  4. Sql Server系列：视图

    视图是数据库中的一种虚拟表,与真实的表一样,视图包含一系列带有名称的行和列数据.行和列数据用来自定义视图的查询所引用的表,并且在引用视图时动态生成. 1. 视图的概念 视图是从一个或者多个表中导出的, ...

  5. LINQ系列：LINQ to XML操作

    LINQ to XML操作XML文件的方法,如创建XML文件.添加新的元素到XML文件中.修改XML文件中的元素.删除XML文件中的元素等. 1. 创建XML文件 string xmlFilePath ...

  6. @font-face使用

    转自http://www.tuicool.com/articles/QVf6nei 一.webfont与@font-face 什么是webfont web font,又称之为 在线字体 或者 网络字体 ...

  7. ASP.NET MVC之JsonResult（六）

    前言 这一节我们利用上节所讲Unobtrusive Ajax并利用MVC中的JsonResult来返回Json数据. JsonResult 上节我们利用分部视图返回数据并进行填充,当我们发出请求需要获 ...

  8. ASP.NET中使用HttpWebRequest调用WCF

    最近项目需要和第三网站进行数据交换,第三方网站基本都是RESTfull形式的API,但是也有的是Web Service,或者.NET里面的WCF.微软鼓励大家使用WCF替代Web Service. W ...

  9. [c++] Callable Objects

    Five kinds of callable objects: Functions Pointers to functions Objects of a class that overloads () ...

  10. 深入seajs源码系列一

    简述 前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现.类似于c/c++的inc ...