解决加了clear:both,margin不起作用问题

最新推荐文章于 2022-07-06 21:20:37 发布
原创 最新推荐文章于 2022-07-06 21:20:37 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

博客提到在父级添加overflow: hidden;，这属于前端开发中CSS相关的操作，可用于解决一些布局问题。

在父级加 overflow: hidden;

margin 无效的情形
liuhao9999的博客
03-23 3445
（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有ma rgin合并的问题。 （2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。 （3）绝对定位元素非定位方位的margin值“无效”。 （4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。 ...
CSS——float属性及Clear:both备忘笔记
01-19
CSS的float属性，作用就是改变块元素对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行，从而可以实现多个元素同处一行的效果。Float的功能很强大，但是如果没有好好掌握而使用很可能会成为你...
浮动margin不生效；clear:both清除浮动
m0_49471668的博客
08-03 325
margin不生效时用padding clear:both清除浮动 设置浮动时用position：relative
clear:both后margin-top不起作用其他左右下都起作用
09-25
clear:both后margin-top不起作用而其他的左右下都起作用，这是怎么回事呢？感兴趣的朋友可以参考下
CSS用了clear:left之后，margin-top失效
iteye_2140的博客
04-11 296
又是一个奇怪的CSS问题，为什么CSS总有这么多不确定因素呢？对前端开发人员实在是中打击，又丧失了点对CSS的热情了。 且看代码：   #div1{ float:left; } #div2{ clear:left; margin-top:20px; }  照理讲，div2应该和div1差20个像素，但是事实证明他们之间一点空隙也没有，解决方法是不得不在html中...
CSS代码中的“clear:both;”失效了
一个80后IT之路
04-18 2748
我最近在模仿博客园，制作一个个人博客，突然发现Footer部分浮动到了Content部分，我在Footer部分已经加了一句“clear:both;”，为什么还会出现这个问题。Footer部分的CSS代码如下： /*页面底部*/ #Footer {width:100%;height:70px;margin:0 auto;clear:both;} /*如果加了clear:both; 此部
.clear方法解决网页自适应高度的问题
09-27
为了解决这个问题，开发者通常会采用一种名为`.clear`的解决方案。 `.clear`方法的核心是添加一个具有`clear:both`属性的空`div`元素到浮动元素之后。`clear:both`属性指示元素不应与任何浮动元素在同一行内显示，...
#content{ width:800px; margin:10px auto 5px auto; clear:both; }
06-06
它将内容区域的宽度设置为800像素，即 width:800px，将内容区域与上下左右的元素之间的外边距分别设置为10像素和5像素，即 margin:10px auto 5px auto。其中，第一个10px表示上外边距，第二个10px表示左右外边距自动...
margin，不起作用
zxp_smile的博客
11-15 539
inline-block，点击切换，下面的高度会变（和border也有关），margin，不起作用
解决CSS 设置clear:both没有效果
m0_62641005的博客
02-20 967
css的clear ：both无效问题解答
[Web前端] Margin 失效问题, 设置了 Margin 却不见效果, 解决方案.
诺尔的博客
03-07 4477
首先演示下: .box1{ width: 300px; height: 300px; } .box2{ width: 200px; height: 200px; } .box3{ width: 100px; height: 100px; } .border-with{ border: solid 1px pink; } .padding-with{ padding: 1px; } .style-pink{ background-colo
CSS的margin失效、塌陷和兼容问题
一杯清泉
07-06 2182
在标准文档流中，竖直方向的margin不叠加，以较大的为准，水平方向不影响，可以叠加。注意是标准文档流，不是标准文档流不存在塌陷现象。 要想使p的margin生效，需要给父布局的div添加border，否则margin无效。margin表示兄弟和兄弟之间的距离，最好不要使用margin表示父子之间的距离，要善于使用padding。 四、margin的IE6兼容问题 1、margin双倍问题 浮动方向和margin方向相反，左浮动+右margin2、IE6的三像素
为什么调html中margin没有变化,CSS中margin不起作用的原因及解决方法
weixin_39595008的博客
06-17 533
margin是一个属性，指定元素和元素之间的间距，但不能为内联元素指定边距，本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法。margin不起作用的原因对于初学者来说，可能会经常遇到即使你设置了margin属性但是却不起作用。在理解margin前，我们先来看一下盒模型margin不起作用的原因往往是没有考虑到display：“display:block”或者“display:i...
网页设计：Css大坑之一，设置margin无效
热门推荐
qq_44131760的博客
03-07 1万+
出现这个问题基本和垂直外边距的特性有关。注意是垂直外边距margin-top/bottom啊，不是水平外边距。 垂直外边距特性： 1.兄弟盒子的垂直外边距会重合，取兄弟元素设置的margin属性最大值。比如上面的盒子设置margin-bottom:200px，下面盒子设置margin-top:100px，那最终两个盒子隔开距离是200px。 2.父子盒子的垂直外边距会传递，在一定的条件下，由子元素margin-top属性会单方向传递给父元素的margin-top属性。 下面会进行实验，看看margin具体是
html设置margin无效,CSS中margin不起作用的原因及解决方法
weixin_29118723的博客
06-18 6611
margin是一个属性，指定元素和元素之间的间距，但不能为内联元素指定边距，本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法。margin不起作用的原因对于初学者来说，可能会经常遇到即使你设置了margin属性但是却不起作用。在理解margin前，我们先来看一下盒模型margin不起作用的原因往往是没有考虑到display：“display:block”或者“display:i...
clear:both 的妙用
流浪猫之家
05-14 324
当前DIV之前的DIV没有指定height时，并且里面有浮动层时，为了将当前DIV上边距与上一个DIV紧挨着可以在当前DIV用clear:both;清除浮动属性来解决，不然当前DIV不认识上一个DIV的高度（因为没指定height默认为0，没有继承子DIV浮动层的高度）；
为什么不直接使用clear:both
qq_42375485的博客
06-26 392
为什么clear:both不起作用？ 首先： clear属性只是在block元素是起作用，如果你把clear:both用在一个inline-block或inline元素上，clear:both是不会起任何作用的。 解决方法： 参考1：利用伪类进行清除浮动 .clearfix:after { clear:both; content:"."; display:block; height:0; line-height:0; visibility:hidden; } 参考2
clear: both;和overflow: hidden;
云影杳杳的博客
09-17 1027
clear: both;无效的情况：  有三个div，分别为a、b、c，a为b、c的父级块，b、c为兄弟块。b、c设置高度，a不设置高度，a会被b或c撑开，当b和c都浮动时，a失去支撑缩成一条，这个时候用clear; both;清除不了父级块a的浮动。应该用overflow: hidden;清除父级块浮动。（应用overflow: hidden;时需要指定该元素的width！）
clear:both;属性
最新发布
06-08
我们正在讨论CSS中的`clear:both;`属性及其在解决布局破坏问题中的应用。...3. 如何用 CSS Grid 实现更稳定的多列布局而不依赖 `clear: both`？ 4. `display: flow-root` 和传统清除浮动有何本质区别？
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值