在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法:
1. 额外标签法
这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需 要额外的(而且通常是无语义的)标签。我个人比较喜欢这种方法,因为它简单、实用、浏览器兼容性好,而且这种方法也是W3C推荐的方法
<div style="clear:both;"></div>
或者使用
<br style="clear:both;"/>
2. 使用after伪类
这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html比较干净。
#outer:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }
3. 设置overflow为hidden或者auto
这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素。不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面。
#outer{ overflow:auto; zoom:1; }
overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决。
4. 浮动外部元素,float-in-float
这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。
相关推荐
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
style type=”text/css”> .wrap{ border:1px solid #006699; width:500px; overflow:hidden; } .wrap .left{ float:left; width:50%; background:#eee; padding-bottom:3000px; margin-bottom:-3000p
1.如果div想要一个最小高度,那么应该用css的minheight这个属性,但是IE不支持,考虑到大多数用户都使用IE,所以一般情况下这个属性基本上弃置不用。在IE里面,height基本上就可以当作minheight来用,因为如果内容...
网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个...
div+css布局中简单的样式,例如: 左右自适应布局 #left { background-color: #FFFF33; height:250px; width:25%; border:10px solid #000000; float:left; margin:10px; }
假设一个 div 内部有个浮动的 div,当内部 div 的高度要比外层的父级 div 高度大时,将会导致父级 div 高度无法随着内部 div 的高度自适应,这是由于浮动元素已经脱离了正常文档流,因此无法对父级元素产生影响。...
20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能...
(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的: 1、没有设置宽度 2、没...
一、宽度自适应的元素水平居中: 1.宽度自适应的元素可以是:绝对位定、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
4、子元素全为浮动元素的元素高度自适应问题。 以下详细分析四个问题。 一、浮动元素自动变块级元素 首先说说块级元素和行内元素区别,简单的来说,块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一...
复制代码代码如下: <div class=”wrap”> <div class=”main”> <div class=”content”></div> </div> <div class=”submain”>2</div> <div class=”sidebar”>3</div> </div> 复制代码代码如下: .wrap{width: ...
// 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-type(1){ float: left; //利用浮动 // postion: absolute; //利用绝对定位 // top: 0; // left: 0; ...
高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear, ...
问题描述:用一个div A层中间放了几个div B来存放内容,因为内容是不固定的,于是就使用了对B层使用了float,让A层自适应高度,后面对A层加上边框,在ie中能显示,但是在firefox中就始终没法显示。 问题分析:B层...
1.要求:如上图中的,三栏目布局,中间的MAIN是自适应浏览器的宽度,左LEFT固定宽200PX,右RIGHT固定宽200PX; 复制代码代码如下: .right,.left{height:300px;width:200px;} .right{ float:right;background:#000000...
前言 随着大前端的发展,UI 框架层出不穷,让我们前端开发对 CSS 的能力要求变得没那么高... <div id=right>右列自适应</div> </body> css 代码: #left { float: left; width: 200px; height: 400px; ba