<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. HDU 5968(异或计算 暴力)

    题意是在一个数列中找到一段连续的子串使其异或值与所给值最接近,求出子串长度,若有多组结果,输出最大长度. 做题之前一定多注意数据范围,这道题就可以直接暴力,用数组 p[ i ][ j ] 表示长度为 ...

  2. $L^p$ 调和函数恒为零

    设 $u$ 是 $\bbR^n$ 上的调和函数, 且 $$\bex \sen{u}_{L^p}=\sex{\int_{\bbR^n}|u(y)|^p\rd y}^{1/p}<\infty. \e ...

  3. Kaldi nnet3的前向计算

    根据任务,构建ComputationRequst 编译ComputationRequst,获取NnetComputation std::shared_ptr<const NnetComputat ...

  4. python 模块 DButils

    # DButils 为了解决多客户端都需要操作数据库的问题. # import pymysql # from DBUtils.PooledDB import PooledDB # # POOL = P ...

  5. 浅谈axios

    在我们的项目中有用到: fetch有直接用的,也有自己封装之后用的; vue-resource在vue1的时候使用,把方法抽象出来后,总需要往方法里传 this.$http ,感觉是个超级不爽的设计, ...

  6. scikit-learn 决策树 分类问题

    1.Demo from sklearn import tree import pydotplus import numpy as np #李航p59表数据 #年龄,有工作,有自己房子,信贷情况,类别 ...

  7. CDQ分治求不知道多少维偏序 (持续更新 ]

    求三维偏序的模板 : //Author : 15owzLy1 //luogu3810.cpp //2018 12 25 16:31:58 #include <cstdio> #includ ...

  8. ActiveMQ之topic主题模式

    开发环境我们使用的是ActiveMQ 5.11.1 Release的Windows版,官网最新版是ActiveMQ 5.12.0 Release,大家可以自行下载,下载地址.需要注意的是,开发时候,要 ...

  9. 数位dp 的简单入门

    时间紧张,就不讲那么详细了. 之前一直被深搜代码误解,以为数位dp 其实就是记忆化深搜...(虽说爆搜确实很舒服而且还好想) 但是后来发现数位dp 的标准格式其实是 预处理 + dp ...... 数 ...

  10. 【原创】大数据基础之Hadoop(3)yarn数据收集与监控

    yarn常用rest api 1 metrics # curl http://localhost:8088/ws/v1/cluster/metrics The cluster metrics reso ...