【问题】父套子时，‘阻止子元素的外边距传递给父元素’与闭合浮动

使用空的<table>标签可以隔离父子元素的外边距，阻止外边距的重叠（直接添加会产生无用标签，要在CSS中添加属性）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box1{ 8                 height: 300px;
 9                 width: 200px;
10                 background-color: coral;
11             }
12             .box2{13                 height: 200px;
14                 width: 200px;
15                 background-color: greenyellow;
16                 margin-top: 30px;
17             }
18             .box1:before{19                 content: "";
20                 display: table;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="box1">
26             <div class="box2">
27
28             </div>
29         </div>
30
31     </body>
32 </html>

解决父元素高度塌陷，进行清除float

方法一：在需要清除浮动的地方加个div.chear或者br.clear【不推荐】因为一旦加入元素就会改变html的结构。

.clear{clear: both;height: 0;overflow: hidden;}

方法二：在浮动的父元素上添加class=“ （box3) clearfix”

.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{*+height: 1%;}

此方法也有弊端，改变CSS中的写法即可

.demo:after,.demo2:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}.demo,.demo2{*+height: 1%;}

方法三:

.clearfix:after{overflow: hidden;zoom: 1;}

方法四：

.clearfix:after{overflow: auto;zoom: 1;}

参考来源：

http://www.daqianduan.com/3606.html

http://www.iyunlu.com/view/css-xhtml/55.html

转载于:https://www.cnblogs.com/WX1211/p/10588261.html

【问题】父套子时，‘阻止子元素的外边距传递给父元素’与闭合浮动相关推荐

jstree禁用父节点点击_Jstree选中父节点时禁用子节点也被选中
这次给大家带来Jstree选中父节点时禁用子节点也被选中,解决Jstree选中父节点时禁用子节点也被选中的注意事项有哪些,下面就是实战案例,一起来看一下. 问题描述: 最近用jstree遇到一个问题, ...
给子盒子设置外边距父盒子跟着移动问题
当父盒子和子盒子的外边距重叠时,当我们改变子盒子的margin-top这时候父盒子会跟着移动,合并后的外边距等于合并前两个外边距中的较大值,这就是子父盒子外边距重叠问题,我们有时候不可避免的遇到这种问 ...
HTML-完美解决父子元素的外边距重叠和高度塌陷问题
HTML-完美解决父子元素的外边距重叠和高度塌陷问题参考文章: (1)HTML-完美解决父子元素的外边距重叠和高度塌陷问题 (2)https://www.cnblogs.com/hack-ing/p ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
vue父组件中调用子组件中的方法及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法: 子组件child.vue: <template><div>我是子组件</div> </template> < ...
jstree禁用父节点点击_Jstree 使用CheckBox插件选中父节点时被禁用的子节点也会选中问题...
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2.修 ...
css变成块级元素_【CSS】块级元素
完整的框模型(Box Model) 不同的宽度.高度.内边距和外边距相结合,就可以确定文档的布局. 大多数情况下,文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定. 1.元素框的最内部 ...
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...
CSS 框模型概述术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
内联元素与块级元素及内外边距的影响
内联元素与块级元素块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素常用的块级元素:div.h1~h6.dl. ...

【问题】父套子时，‘阻止子元素的外边距传递给父元素’与闭合浮动

【问题】父套子时，‘阻止子元素的外边距传递给父元素’与闭合浮动相关推荐

最新文章

热门文章