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

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

  2. LINQ系列：Linq to Object限制操作符

    1. Where 限制操作符Where用于过滤序列,按照提供的逻辑对序列中的数据进行过滤.Where可以出现多次. 1.1 原型定义 public static IEnumerable<TSou ...

  3. 【Win 10应用开发】实现全屏播放的方法

    有人会问,以前的MediaElement控件不是有现成的一排操作按钮吗?而且可以直接进入全屏播放.是的,我们知道,以往的Store App都是在全屏模式下运行的,只要MediaElement控件填满整 ...

  4. 希尔排序及希尔排序java代码

    原文链接:http://www.orlion.ga/193/ 由上图可看到希尔排序先约定一个间隔(图中是4),然后对0.4.8这个三个位置的数据进行插入排序,然后向右移一位对位置1.5.9进行插入排序 ...

  5. Android之SqlLite数据库使用

    每个应用程序都要使用数据,Android应用程序也不例外,Android使用开源的.与操作系统无关的SQL数据库—SQLite.SQLite第一个Alpha版本诞生于2000年5月,它是一款轻量级数据 ...

  6. SpringMVC那点事

    一.SpringMVC返回json数据的三种方式 1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id=" ...

  7. 取消vs2013在solution中单击打开文件的功能

    2013用了一段时间,不错,就是单击会打开文件,有点恼人(因人而异吧).解决方案: 取消红色框框里面的那个checkbox就ok了. 来自为知笔记(Wiz)

  8. 我的Objective-C系列文章

    做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都是在斟酌之后所写的,每篇博客所粘贴的代码都是经过调试运行无 ...

  9. Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

    在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...

  10. 2015-10-22 前思后想，决定重构表结构，免得这个APP死在数据表设计上

    新的设计稿出来了,如下,原来旧的是第二张       -------  原来的评论级数只有2级,现在是不限,2级的意思是,用户评论该帖是一级,用户的评论能被人评论,这是第2级,评论评论的评论不能够再被 ...