float浮动元素IE6/7下margin-bottom失效解决方案

最新推荐文章于 2021-11-08 20:32:30 发布
原创 最新推荐文章于 2021-11-08 20:32:30 发布 · 523 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#IE7 #IE6 #IE margin失效

本文提供了解决在Internet Explorer 6和7浏览器中，使用CSS浮动(float)布局时，底部外边距(margin-bottom)不生效的问题方案。通过在浮动元素后添加clearfix类的div元素，并设置相应的CSS样式，可以有效解决这一兼容性难题。
float浮动元素IE6/7下margin-bottom失效：

这里写图片描述
这里写图片描述

解决方案：

在浮动元素后面添加：

<div class="clearfix"></div>

给类名设置样式：

.clearfix{ clear:both; height:0; font-size: 1px; line-height: 0px;}

即可！

浏览器/html/css面试题----3
MingL520的博客
05-24 533
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。
IE6兼容性问题及IE6常见bug详细汇总
12-13
8. **左浮元素margin-bottom失效** 左浮动元素的margin-bottom在IE6中可能无效。 解决方法：设定元素的高度，或者用父元素的padding-bottom替代子元素的margin-bottom，或利用额外的标签进行布局调整。 9. **img...
margin-bottom float IE7/IE6 失效
专注前端开发
10-28 910
今天 发现 margin-bottom 在IE居然失效
IE7下浮动元素margin-bottom失效
u013120516的博客
07-13 414
IE7下浮动元素margin-bottom失效，给浮动元素后加一个&lt;div class='clear'&gt;&lt;/div&gt;，清除浮动。 .clear{ clear:both; overflow:hidden; }  
CSS高度塌陷问题（float塌陷&margin塌陷）
YANGMENGZHENG的博客
11-08 2695
一、什么是盒子高度塌陷？ 1、解释 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。 2、代码示例 ...
Android 布局和控件
shipingxue的专栏
10-28 235
一、Android七大布局 共7种布局，其中LInearLayout、RelativeLayout、ConstraintLayout比较常用，FrameLayout偶尔会用，GridLayout、TableLayout很少用，absoluteLayout基本不用。 线性布局（LInearLayout） 相对布局（RelativeLayout） 约束布局（ConstraintLayout） ConstraintLayout 可以解决多层嵌套的问题，功能更强大，性能更高效。 帧布局（FrameLayo
html 垂直float,CSS：“float：bottom”如果有可用的垂直空间. “浮动：离开”否则...
weixin_42451611的博客
06-17 563
根据您所需的浏览器支持级别,简单的媒体查询可以解决您的问题：gt;这是我看到的效果：有关视口高度的相关代码段：The ‘height’ media feature describes the height of the targeted display area of the output device. For continuous media,this is the height of the...
clear:both后margin-top不起作用其他左右下都起作用
09-25
在CSS布局中，`clear:both`属性用于解决元素因前一个浮动元素而产生的环绕问题。当一个元素设置了`float:left`或`float:right`时，它会脱离常规文档流，而`clear:both`则用于清除这种浮动，使后续元素不再受到前面...
为什么设计margin-bottom不生效
最新发布
07-19
如果元素设置了 `float` 属性（如 `float: left` 或 `float: right`），其 `margin` 的行为会受到影响，特别是在与其他浮动元素共存时，可能会出现 `margin-bottom` 失效的情况[^5]。 4. **父容器高度未明确设置**...
IE6常见bug附解决方法
09-25
当一个元素左浮动后，其`margin-bottom`属性在IE6中可能不会生效。 **解决方法**： 1. 明确设置该元素的高度。 2. 使用父元素的`padding-bottom`代替子元素的`margin-bottom`。 3. 将另一个元素与当前元素并列浮动...
IE7 float:left左浮动失效的解决方法
09-25
下面的例子中在FIREFOX和CHROME等浏览器中，b和c会左对齐显示于两排，但在IE7下却不是，下面有个不错的解决方法，感兴趣的朋友不要错过
CSS布局之float + 负margin的使用
Conradine_Lian的博客
08-18 675
负margin 设置元素margin-left / margin-top 属性为负值时，元素会按照设置的方向移动相应的距离。 设置元素margin-right / margin-bottom属性为负值时，元素本身不动，后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。 圣杯布局 HTML结构： <div class="wrapper clearfix"> <div class="left"></div> <div class="cente
html 垂直float,CSS:"float:bottom"如果有可用的垂直空间."浮动:离开"否则
weixin_39518840的博客
06-17 352
Phil..8根据您所需的浏览器支持级别,简单的媒体查询可以解决您的问题:/* SET THE DEFAULT RULES FOR SHORT SCREENS */.bottom-floaty {height:200px;width: 400px;margin: 15px; padding: 10px;outline: 1px dashed #aaf;}/* HERE FOLLOWS THE MA...
div+css经验：float命令详解
Simplicity is more complicated than you think
08-30 6903
CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征。 内容基本的浮动原理 浮动是如何进行的 浮动从何处开始 水平浮动堆叠 反向浮动 Clearing Floats if you are like most people, the whole issue of Floats is rather intimidating. The theory is
css float 的使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-29 657
float float 属性定义元素在哪个方向浮动 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 注意float没有top 和bottom 属性,输入设置了,会没有效果. inherit <!DOCTYP...
html bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法
weixin_29063035的博客
06-03 6893
首先来看一个案例：.bottom-box{margin-top:30px;}我设置了margin-top属性，我的上边距应该距离父元素为30px;可是结果如何呢？结果并不是class为bottom-box的div上边距离父元素30px;而是距离body元素30px;什么原因呢？当个子元素设置margin-top属性时，如何父元素没有设置padding属性，即padding属性为0，那么会出现以上这...
HTML中float:right;没有效果的解决方法！
热门推荐
lu12077的博客
07-25 3万+
&lt;div style="position: relative;"&gt; &lt;div&gt; &lt;a&gt;字体&lt;/a&gt; &lt;/div&gt; &lt;div style="position:absolute;right:0px;"&gt; &lt;span
定义了浮动元素后margin-bottom失效的解决办法
elsyy良师益友的博客
12-21 3715
虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。 在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值