<div class="box1">
<tabl></table>
<div class="box2"></div>
</div>

原理1:

<table> 将会隔离父子元素,

所以解决垂直外边距重叠问题方法1:

.clearfix:before{
content:"";
display:table;
}

原理2:

 解决高度塌陷方法2:

.clearfix:after{
contemt:"";
display: block;
clear: both;
}

最终方法:

.clearfix {
zoom:;
} .clearfix:before,.clearfix:after {
content:"";
display: table;
clear: both;
}

给父元素加 class="clearfix"; 即可。


__x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷的更多相关文章

  1. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  2. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  3. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  4. __x__(44)0910第六天__表单

    form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器 ...

  5. __x__(45)0910第六天__各种表单

    效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> ...

  6. __x__(46)0910第六天__框架集

     框架集frameset 和 内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe ...

  7. __x__(49)0910第六天__命名规范

    id class 命名规范: 小驼峰命名法: aaaBbbCcc,helloWorld 大驼峰命名法: AaaBbbCcc,HelloWorld 匈牙利命名法: 类型+描述 formUserName, ...

  8. __x__(42)0910第六天__表格布局 老旧的布局方法

    table 布局 不易于维护,耦合太严重了. 不利于搜索引擎检索. 效果图: html代码: <!doctype html> <html> <head> <m ...

  9. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

随机推荐

  1. Typora使用说明(记录总结)

    目录 区域元素 YAML FONT Matters 菜单 段落 标题 引注 序列 可选序列 代码块 数学块 表格 脚注 水平线 特征元素 链接 超链接 内链接 相关链 URLs 图片 斜体 加粗 删除 ...

  2. 第十二节:MVC中的一些特殊优化

    一. 删除WebForm视图引擎 在MVC框架中检索视图的顺序为:当前控制器下对应的文件夹的aspx文件→share文件夹aspx文件→当前控制器下对应文件夹的cshtml文件→share文件夹的cs ...

  3. Node.js实战项目学习系列(1) 初识Node.js

    前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...

  4. pymysql的使用及sql注入

    pymysql简介 pymysql是python操纵mysql的一个模块,本质上是一个socket客户端 pymysql使用 准备数据 #创建数据库db2,如果已存在,请忽略 CREATE DATAB ...

  5. 「luogu2486」[SDOI2011] 染色

    https://www.luogu.org/problemnew/show/P2486 轻重链剖分后,问题转化为一个链上的问题: 线段树维护区间内的颜色段数量,左端点.右端点的颜色: 线段树注意事项 ...

  6. redis更多

    应用场景 存放频繁操作的数据,以及一些无须保存到数据库的中间值 应用: - 配合django做缓存,常用且不易修改的数据放进来(博客) - 购物车信息 - Session - 缓存配置文件 - ses ...

  7. 往服务器部署thinkphp5代码时要注意 pathinfo的问题

    往服务器部署thinkphp5代码时要注意 pathinfo的问题 如果nginx没有做任何设置 要使用?s=/的方式访问地址 只需要修改3个地方就可以了,亲测成功,看代码有注解 location ~ ...

  8. 【原创】大数据基础之Oozie(1)简介、源代码解析

    Oozie4.3 一 简介 1 官网 http://oozie.apache.org/ Apache Oozie Workflow Scheduler for Hadoop Hadoop生态的工作流调 ...

  9. php 新闻上一条下一条

    public function prevnext($table,$id,$where=[]){ $ids=db($table)->field('id,title')->order('sor ...

  10. c4b和c4f的区别

    1. cc.c4b的参数直接填rgba的值. 2 .cc.c4f(r,g,b,透明度),把rgb值填进去,会发现颜色不对,需要把rgb值除以255,所以最终转换公式是: cc.c3b(r,g,b) = ...