解决外边距重叠和高度塌陷

表格布局魔法：解决外边距重叠与高度塌陷的CSS技巧
最新推荐文章于 2022-07-18 21:10:37 发布
原创 最新推荐文章于 2022-07-18 21:10:37 发布 · 134 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #html #前端

本文揭示了如何通过CSS `display: table`属性巧妙地解决网页布局中的外边距重叠问题，并介绍如何使用`::before`和`::after`伪元素配合`clear`属性来避免高度塌陷，提升页面结构的稳定性。

解决外边距重叠——
.xxx::before{
content:" “;
display:table
}
解决高度塌陷——
.xxx::after{
content:” ";
display:table;
clear:both;
}
display:table;既可以解决外边距重叠也可以解决高度塌陷

CSS高度塌陷问题和外边距重叠的解决方案（clear方法）
ScottePerk的博客
08-29 1307
我们可以利用浮动属性来实现高效的水平布局，但是如果你写下面的代码，就会发现box1的高度出现问题，因为box1的高度是靠子元素box2撑起来的，现在box2变成了浮动元素，box1就没有了高度，这就造成了高度塌陷问题。如果我们在蓝色div2的下方兄弟位置添加一个div3，并且设置clear属性，那么div2将会顶住div3，那么红色的div1将会有高度，高度就是div2的高度。可以通过调整父子的padding来投机取巧的实现这样的功能，但比较麻烦，而前面的clear属性也可以完美的解决这个问题。......
什么是BFC？如何解决垂直外边距重叠与高度塌陷？看这一篇就够了
tzw14030140049的博客
04-17 850
一、概念 BFC：块级格式上下文 注意：针对块级元素有效，内联元素参考IFC(行级格式上下文) MDN中的解释： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 创建方式： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具...
css解决高度塌陷以及外边距重叠的问题
嘘...一只bug
02-22 496
什么是高度塌陷？ 在浮动布局中，父元素的高度默认是被子元素撑开的，我们给子元素设置了浮动，其会脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失， 其下的元素会自动上移，导致页面布局混乱 如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
【前端小点】clearfix解决高度塌陷及外边距重叠
球球博客
05-12 682
高度塌陷及外边距重叠 解决： .clearfix:after, .clearfix:before{ content: ''; display: table; clear: both; } 一、高度塌陷问题 高度塌陷是浮动布局中比较常见的一个问题。在浮动布局中，父元素的高度默认是被子元素撑开的，但，当子元素浮动后，子元素会完全脱离文档流，无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会上移，导致页面布局混乱。 举个栗子： <body> <div cl
解决外边距溢出的问题和解决浮动塌陷问题
ScumStudy的博客
07-22 403
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
解决高度塌陷与外边距重叠的方法
43612538的博客
09-12 522
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>解决高度塌陷与外边距重叠的方法</title> <link rel="stylesheet" href="css/reset.css"> <style> .clearfix:bef
::before或::after伪类改变父元素高度
qq_48113035的博客
02-25 2950
一、介绍 当父元素设置高度为100%时，那么其伪类(::before和::after)，可以设置padding-top或padding-bottom改变父元素高度。 如：父元素设置如下 <style> .nav{ width: 200px; height: 100%; background-color: red; } </style> <div class="father"></div>
在html中通过使用css解决外边距重叠（外边距塌陷）问题
小杨的博客
07-18 2228
【什么是外边距重叠，重叠的结果是什么？ 】 1.什么是外边距重叠？ 外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高...给大家分享一下什么是外边距重叠？重叠的结果是什么？1.背景介绍外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。2.知识...给大家分享一下什么是外边距重叠？重叠的结果是什么？1.背景介绍外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。2.知识...给大家分享一下什么是外边距
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
为何overflow: hidden可解决外边距重叠？
最新发布
10-25
我们正在讨论CSS中的overflow:hidden属性如何解决外边距重叠（也称为外边距塌陷）的问题。根据引用内容，特别是引用[1]和引用[4]提到overflow:hidden可以解决外边距塌陷问题。我们需要解释其原因。 外边距重叠...
HTML&CSS相关面试题
qq_39349116的博客
05-17 524
一、什么是盒模型 1.在我们HTML页面中 每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。 2.盒子模型有标准盒子模型和怪异盒子模型 标准模式下: 一个盒子的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异模式下: 一个盒子的总宽度= width + margin(左右)（即width已经包含了padding和border
CSS中级教程21~25
qq_41995845的博客
09-16 224
21、CSS 表单 CSS 属性选择器 CSS 计数器 通过使用 CSS，可以极大地改善 HTML 表单的外观： First Name Your name… Last Name Your last name… Country Australia 亲自试一试 设置输入字段的样式 使用 width 属性来确定输入字段的宽度： First Name 实例 input { width: 100%; } 亲自试一试 上例适用于所有 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器： input[ty
清除浮动最简单的两种方式
一只京大的博客
02-14 702
总结一下，使用float的话，需要清除浮动的两种简单方式：1.通过伪元素&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;清除浮动常用简单的两种方式&lt;/title&gt; &lt;style&gt; .b
解决外边距塌陷不止三种方法
m0_57965131的博客
02-21 4903
外边距合并也叫作外边距塌陷，那什么是外边距塌陷？ 满足以下条件就会产生外边距塌陷现象： 1，子元素在父元素里面 2，子元素中有margin-top或者margin-bottom值 此时已经产生外边距塌陷 那么该怎么解决呢，个人认为有七种方式： 第一种：给父元素增加 ...
css高度塌陷和外边距塌陷的原因及解决办法
A_Common_Man的博客
05-10 6678
解决外边距塌陷，父元素高度塌陷的问题
解决方法 一.高度塌陷和 二.垂直外边距重叠的问题
Lrj_estranged的博客
11-10 2256
一：高度塌陷问题 （1）产生的原因：1.在文档流中，父元素的高度默认被子元素撑开                                    2.当子元素浮动脱离文档流，无法继续撑起父元素高度，导致父元素塌陷，会使页面混乱， （2）效果如下图： 在文档流中，父元素高度默认被子元素撑开: 设置子元素浮动后，导致父元素高度塌陷： （3）解决方法： 使用cle
用after伪类解决高度塌陷和外边距重叠
wxwmb11的博客
03-29 268
.clearfix::after,.clearfix::after { content:’’; display:table; clear:both; } 解决外边距重叠和高度塌陷问题 多功能塌陷 那个有问题就写在哪里 .div2::after{ display:block/table; clear:both; } 解决高度塌陷
外边距塌陷问题
wx的博客
08-26 8757
嵌套的盒子，直接给盒子设置垂直方向外边距的时候，会发生外边距塌陷。 举个例子：在嵌套关系的盒子模型中，一个父盒子里边嵌套一个子盒子，让子盒子在父盒子里边上下移动，而不影响整体布局
CSS中clear:both的作用
热门推荐
认真做事，开心生活
02-19 5万+
clear:both意思就是清除浮动，例如我们设置了三个div如下： &lt;div style="line-height: 30px;             background-color: #EEEEEE;             height: 100px;             width: 50px;             float: left;             p...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值