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. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  2. java Proxy(代理机制)

    我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的我们的功能,我们更需要学习 ...

  3. C++中public、protected及private用法

    转自:http://www.jb51.net/article/54224.htm 初学C++的朋友经常在类中看到public,protected,private以及它们在继承中表示的一些访问范围,很容 ...

  4. JSP页面静态化

    Ps:好久没写博客了,不是我太懒,是因为苦逼的我出差去上海了,天天加班 刚回成都.... 今天说说jsp页面静态化,知道静态化的朋友都不陌生,说白了就是访问后缀是html 而不是jsp. 没听说过静态 ...

  5. 如何用Pivot实现行列转换

    在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...

  6. C算法编程题（二）正螺旋

    前言 上一篇<C算法编程题(一)扑克牌发牌> 写东西前总是喜欢吐槽一些东西,还是多啰嗦几句吧,早上看了一篇博文<谈谈外企涨工资那些事>,里面楼主讲到外企公司包含的五类人,其实不 ...

  7. Golang类型转换

    类型转换 1.int转string strconv.Itoa(i) 2.string转int i, err = strconv.Atoi(s) 或者 i, err = ParseInt(s, 10, ...

  8. CentOS初始化Mysql5.7密码

    /etc/init.d/mysql stopmysqld_safe --user=mysql --skip-grant-tables --skip-networking &mysql -u r ...

  9. Hive创建表格报【Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException】引发的血案

    在成功启动Hive之后感慨这次终于没有出现Bug了,满怀信心地打了长长的创建表格的命令,结果现实再一次给了我一棒,报了以下的错误Error, return code 1 from org.apache ...

  10. C++继承和多态

    继承 访问控制 基类的成员函数可以有public.protected.private三种访问属性. 类的继承方式有public.protected.private三种. 公有继承 当类的继承方式为pu ...