`
accphc
  • 浏览: 121968 次
  • 性别: Icon_minigender_1
  • 来自: CD
社区版块
存档分类
最新评论

解决浮动元素父容器高度自适应问题

    博客分类:
  • CSS
 
阅读更多

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>clearfix</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<style type="text/css"> 
.area{background:#ccc;width:960px;}/*定义父容器背景颜色,以便于观察;定义宽度,使其在IE下高度自适应*/
.clearfix:after{height:0px;visibility:hidden;content:".";clear:both;display:block;}
.fl{float:left;background:#FFDF00;}
</style> 
</head> 
<body> 
<div class="area clearfix">
    <div class="fl">floater</div>
</div>
</body> 
</html>

 

分享到:
评论

相关推荐

    子元素div高度不确定时父div高度如何自适应

    在最外层div加以下样式 height:100%; overflow:hidden;...我们可以通过三种方法来解决这个问题 1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。 复制代码代码如下: &lt;div id=”m

    什么是高度塌陷 以及高度塌陷的解决办法

    当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷。 高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐使用。 方法二:给父...

    自己整理div+css网页标准版式布局(50种布局方式)

    大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者... 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图

    div+css有实例,易学易懂

    8.7.2 FIREFOX2.0 中的浮动元素和容器 8.7.3 并列浮动元素默认宽度的问题 8.8 嵌套元素宽度和高度叠中的问题 8.8.1 父元素和子元素均没有定义宽度和高度 8.8.2 定义子元素的宽度后的效果 8.8.3 定义父元素宽度后的...

    46种常见的浏览器兼容性问题大汇总

    7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body...

    最最最全的清除浮动方法

    父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。 overflow : hidden (BFC规范) , 如果有子元素想溢出,那么会受到影响。 display : inline-block (BFC规范),不推荐,父容器会影响到后面的元素。 设置...

    web前端开发中常见的多列布局解决方案整理(一定要看)

    本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现。需要注意的是背景颜色可以设置在p标签上,也可以设置在div标签上。 多...

    gu000047.github.io:我的github页面网站

    重做 我将,,三页作为作业的自我设计模板。 设计元素主要覆盖图片和文本,并且不使用动画效果。... 在这里,我分别使用边距,填充(内部和外部),(左右),弹性,浮动和高度。 宽度自适应(宽度:100%)调整图片

    CSS网站布局实录 (第二版)PDF版

    3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流(Document Flow) 3.11.2 浮动定位...

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

Global site tag (gtag.js) - Google Analytics