盒子塌陷的解决方法

最新推荐文章于 2022-08-29 20:17:23 发布
最新推荐文章于 2022-08-29 20:17:23 发布
阅读量223 收藏
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53380949/article/details/123917987
版权
当子元素的外边距应用到父元素导致盒子塌陷，可以通过设置父元素的`overflow:hidden;`，添加透明边框`border:1px solid transparent;`，或者浮动来避免。通常首选`overflow:hidden;`作为最佳实践。
摘要由CSDN通过智能技术生成

盒子塌陷的理解：是因为给子元素加的外边距，应用到了父元素身上。

解决的方法：

  1. 可以给父级元素加溢出隐藏（ 
    overflow:hidden;
    )
  2. 可以给父级元素加一个透明的边框 
    border:1px solid transparent;
  3. 给父级元素加浮动
  4. 可以用padding来代替margin设置边距

总结：比较好的使用方法当然直接用第一种方法比较好

wo可飒
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css拓展--盒子高度塌陷问题及其解决方法
zxn200125的博客
10-13 583
盒子高度塌陷问题及其解决方法
盒子高度塌陷及解决方法、visibility 和 display 隐藏
m0_61700036的博客
10-13 619
一、HTML、CSS、JS 区别于联系 二、盒子高度塌陷 1.什么是元素高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 三、visibility 和 display 隐藏的区别 ...
详解CSS盒子塌陷的5种解决方法
12-14
一，盒子塌陷是什么？ 本应该在父盒子内部的元素跑到了外部。 二，为什么会出现盒子塌陷？ 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。 下图下方两个子元素的盒子分别设置了左浮动和右浮动，顶端的长条盒子出现了塌陷 ex : 三，关于盒子塌陷的几种解决方法 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及
盒子模型塌陷解决办法
赵佳敏的博客
10-27 2215
一、盒子模型塌陷 当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。 例如这种情况： <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: tomato; } ..
盒子塌陷及其解决方法
hannah2233的博客
07-09 2384
1、父盒子内部的元素跑到了外部 2、 为什么会出现盒子塌陷?1、 盒子大小写死，给每个盒子设定固定的width和height 2、 父盒子添加overflow属性3、 父盒子最下方引入清除浮动块 4、 after伪元素清除浮动 5、 使用before和after双伪元素清除浮动...
CSS(四)(盒子塌陷问题)
m0_48375854的博客
10-15 597
文章目录一、盒子塌陷问题1.出现问题2.解决办法3.具体实现二、其他盒子塌陷问题 一、盒子塌陷问题 1.出现问题 有两个嵌套的DIV盒子，父盒子里面有一个子盒子，想让子盒子和父盒子上边距之间有一段间距，但是给子级元素添加的外边距没有效果，效果显示在了父级元素身上。 例如： 给定两个DIV盒子，父盒子为宽高均为200像素的蓝色盒子，子盒子为宽高均为100像素的绿色盒子，给子盒子添加上外边距30px。 HTML结构为： <body> <div class="father">
css拓展--盒子外边距塌陷/合并问题及其解决方法
zxn200125的博客
10-16 902
盒子外边距塌陷/合并问题及其解决方法
盒子高度塌陷
m0_70516782的博客
06-30 168
一般情况父元素的高度不会写死，让他被内容撑开 高度塌陷 设置元素脱离文档流，那就无法撑开父元素的高度，导致父元素的高度丢失 使得页面布局发生混乱 这就叫高度塌陷 将父元素高度固定住 不推荐使用 页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC 当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素 BFC 理解为一个封闭的大箱子，箱子
CSS盒子塌陷及解决方法
橘猫吃不胖的博客
02-08 6430
CSS盒子塌陷及解决方法1 盒子塌陷的原因2 如何清除塌陷 1 盒子塌陷的原因 什么是盒子塌陷？ 外部的盒子没有包裹住内部的浮动盒子，导致了盒子塌陷。 盒子高度塌陷原因？ ①父元素没有设置高度（height）； ②且其子元素脱离了文档流，导致内部没有元素可以撑起当前父元素： a. 内部子元素使用了浮动导致内部元素脱离了文档流，且脱离文档流的元素无法撑起当前父元素。 b. 内部子元素使用了绝对定位或者固定定位脱离文档流。 示例：设置一个父div和一个子div，首先不设置父盒子的高度，给父盒子设置宽
CSS盒子塌陷问题解决方案
前端向朔
10-07 7991
什么是盒子塌陷？ 外部盒子本应该包裹住内部的浮动盒子，结果却没有。 问题出现的原因 父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。 因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内
盒子模型塌陷？什么是BFC?
m0_55557411的博客
04-29 1234
盒子模型塌陷的问题，和解决方案
css盒子塌陷的几种解决方法
温壁
10-11 4458
&lt;！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.0 Transitional // EN”&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; &lt;/ title&gt; &lt;meta name =“”content =“”&gt; &lt;style&gt; * { 保证金：0像素; 填充：0像素; }
CSS解决盒子高度塌陷问题
m0_51144154的博客
01-05 1498
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。 方法一： 我 们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。 方法二： 根据W3C的标准，在页面
解决盒子模型中的塌陷情况
liuliyueliuli的博客
08-14 1296
我们在HTML中总会遇到各种情况，其中盒子塌陷就是一种常遇到的情况，解决这一问题有三种方法。 Q.问题的产生。 两个盒子呈嵌套关系，对子盒子设置 margin-top时父盒子会随着子盒子同时下移，并且 margin-top看不到效果。 解决方法如下： 1.给父盒子添加溢出隐藏：overfl：hidde； 代码如下： 效果图： 2.在父盒子中设置边框：border; 效果图： 3.在父盒...
如何解决浮动的影响（父盒子高度塌陷）
趙尒七
03-03 1914
添加一个知识点：浮动和绝对定位会使元素脱标，导致行内元素转换为行内块元素，可以设置宽和高。 未加浮动： 加了浮动之后： 3.解决方法： 1.给父盒子定高：（不实际） 2.overflow:hidden (清除浮动流) 有问题会把有用的内容都隐藏掉 3. clear :both （需要依附于一个空盒子，如果需要清除的浮动太多，会使文档树...
盒子浮动，盒子塌陷，解决办法：清除浮动...
日晞的博客
08-16 2034
盒子塌陷：子盒子的内容到父盒子外面 这里container：父亲盒子，item:子盒子 子盒子的内容到父盒子外面了，盒子就是塌陷了 产生塌陷的原因： 父盒子：没有设置高度 且 子盒子：脱离文档流(eg:float:left) ==> 盒子塌陷 解决盒子塌陷问题: 对父盒子：把父盒子的高度写死即可 或 对子盒子：清除子盒子的浮动 清除子盒子的浮动方法(3个)： 在子盒子后面添加一个盒子，给其添加clear：both属性 <!DOCTYPE...
盒子塌陷的原因？解决方法
zhou_ya_nan的博客
11-26 2328
导致塌陷的主谋----浮动 原因一：浮动的脱落标准流 原因二：嵌套的两个盒子，子盒子设置margin-top会导致父盒子一下子下移 解决方法 第一：清除浮动 第二：给父盒子加高度 第三：给父元素添加overflow：hidden 针对原因一： 1.可以给父元素加上边框 2.可以给父元素添加overflow:hidden ...
HTML中div盒子摆放问题--边界塌陷问题处理
Kong_Long的博客
08-29 658
方法：在浮动div的下一个div进行清除浮动=>clear: both（缺点：不灵活，每次多出一个div）div盒子摆放问题，页面布局中利用float调整盒子位置是出现边界塌陷，实现在一列放多个div并调整位置。注意：浮动完之后要清除浮动回到标准流==防止位置错乱。为伪元素加内容，并将其改为块元素，最后清除浮动。全部div使用浮动 => 最外层div添加浮动。和标签默认存在。在最外层div用伪元素清理上下边缘。边界塌陷最优解决办法：伪元素。css使用浮动float,...
CSS盒子高度塌陷的解决方法
weixin_45709829的博客
04-01 2560
CSS盒子高度塌陷的解决方法 一、盒子塌陷 （1）什么是盒子塌陷 高度塌陷，当所有的子元素浮动的时候，且父元素没有高度设置，这时候会产生父元素高度塌陷，本应该在父盒子内部的元素跑到外面。 正常显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box {
绝对定位盒子高度塌陷
最新发布
08-20
- *1* *2* [CSS盒子塌陷及解决方法](https://blog.csdn.net/m0_46612221/article/details/121295507)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值