<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. Fiddler--Composer

    Composer选项卡支持手动构建和发请求:也可以在Session列表中拖拽Session放到Composer中,把该Session的请求复制到用户界面: 点击"execute"按 ...

  2. dubbo本地服务化实现(dubbo三)

    一.dubbo服务化架构包含的内容 对于传统工程而言,分层的依据是按照包来区分.由于在相同的工程中,所以服务的提供和调用可以方便的实现. 但是对于分布式架构而言,服务的提供者负责服务具体的实现和接口规 ...

  3. [物理学与PDEs]第1章第9节 Darwin 模型 9.1 拟静电模型及其修正形式

    1. 拟静电模型: 当 $\cfrac{\omega}{c}\ll \cfrac{1}{c}\lra \omega\ll \cfrac{c}{l}$ 时, $$\bex \cfrac{1}{c}\cf ...

  4. 时间序列函数resamlpe详解

    resample与groupby的区别:resample:在给定的时间单位内重取样groupby:对给定的数据条目进行统计 函数原型:DataFrame.resample(rule, how=None ...

  5. MVC5 Entity Framework学习

    MVC5 Entity Framework学习(1):创建Entity Framework数据模型 MVC5 Entity Framework学习(2):实现基本的CRUD功能 MVC5 Entity ...

  6. 拆系数FFT及其部分优化

    模拟考某题一开始由于校内OJ太慢直接拆系数FFT跑不过 后来被神仙婊了一顿之后发现复杂度写炸了改了改随便过 模版题:任意模数NTT 三模数NTT 常数巨大,跑的极慢 拆系数FFT 原理是对于两个多项式 ...

  7. js将时间戳转换为日期类型

    function getLocalTime(nS) {       var date = new Date(nS);    Y = date.getFullYear() + '年';    M = ( ...

  8. 34. Find First and Last Position of Element in Sorted Array

    1. 原始题目 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在 ...

  9. 关于TabLayout与ViewPager在Fragment中嵌套Fragment使用或配合使用的思考

    注意: 因为继承的是Fragment,所以getSupportFragmentManager()与getFragmentManager()方法无法使用,这里需要用到getChildFragmentMa ...

  10. SQL Server2016安装

    VS2017已经发布10多天了,这几天正好要重新做系统.所以想着把SQL Server和VS都做一次升级.VS2017只需要下载一个安装包就可以进行在线安装.但是SQL Server2016安装时会碰 ...