css 外边距塌陷解决方法

内部元素影响外部元素样式，外边距塌陷（BFC）

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

哪些元素会生成BFC?
html 根元素；
float 的值不为 none；
overflow 的值为 auto、scroll 或者 hidden；
display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
position 的值不为 relative 和 static；

触发 BFC 后，就不需要使用 clear:both 属性去清除浮动的影响。

再或者。。。。。。加空table也可以解决外边距塌陷

 <div class="outside"><div class="inside"></div></div>

 .outside{width:300px;height:200px;background: skyblue;}.inside{width:100px;height:100px;background: crimson;margin-top:50px;}

效果：

然而加一个空table css不变

  <div class="outside"><table></table><div class="inside"></div></div>

效果：

css 外边距塌陷解决方法相关推荐

css外边距溢出处理方法,CSS高度坍塌和外边距溢出问题及解决方法
高度坍塌成因父元素div未设置高度子元素全部设置浮动(float: left | right;),浮动元素脱离文档流且不占页面空间由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文 ...
html5前端开发培训机构，CSS外边距塌陷问题
网上有句流传很广的话,你知道最好欺负的人是谁吗? 答案是中年人. 为什么中年人好欺负?上有老,下有小,还有房贷.车贷-随便一根小稻草,都能把人压得喘不过气来. 生活可没那么慈善.蹦出来的还往往不是什么 ...
TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷
2020/12/31 TDK优化标题logo优化模块化开发思想结构拆分阿里巴巴矢量图库 https://www.iconfont.cn/ 选择图标是ui做的引入方式推荐font class ...
CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可 ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
CSS外边距合并问题以及方法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝 ...
详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）
⼀. overflow:hidden 溢出隐藏给⼀个元素设置overflow: hidden,如果该元素中的内容超出了给定的宽度或⾼度,那么超出的部分将会被隐藏,不占位. <style typ ...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. /*css样式*/ ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

css 外边距塌陷解决方法

css 外边距塌陷解决方法相关推荐

最新文章

热门文章