解决子块float浮动后 父块高度自适应问题
2008-05-02 00:46
也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。
如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：

怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上

overflow:auto; zoom:1;

即可
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。

示例代码开始

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float浮动之后的问题</title>
<style>
* { padding:0; margin:0;}
body { font-size:12px; line-height:150%;}
ul { list-style:none;}
.container { width:700px; margin:0 auto;}
.header, .footer { height:60px; background:#99CC66; margin-bottom:6px; font-size:18px; font

-weight:bold;}
.main {}
.left { float:left; width:200px;}
.sidepanel { border:1px solid #CC6600; margin-bottom:8px;}
.sidepanel h2 { font-size:12px; background:#CC6600; height:24px; line-height:24px; text-

indent:20px; color:#fff;}
.city { padding:6px 0px; overflow:auto; zoom:1;}
.city li { float:left; width:35px; text-align:center;}
.right { margin-left:200px; background:#CCCC66; height:240px;}
.hotinfo {padding:6px;}
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
</head>

<body>
<div class="container">
<div class="header">header</div>
<div class="main">
    <div class="left">
      <div class="sidepanel">
        <h2>城市导航</h2>
        <ul class="city">
          <li>北京</li>
          <li>上海</li>
          <li>天津</li>
          <li>南京</li>
          <li>广州</li>
          <li>重庆</li>
          <li>济南</li>
          <li>杭州</li>
          <li>郑州</li>
          <li>北京</li>
          <li>上海</li>
          <li>天津</li>
          <li>南京</li>
          <li>广州</li>
          <li>重庆</li>
          <li>济南</li>
          <li>杭州</li>
          <li>郑州</li>
        </ul>
      </div>
      <div class="sidepanel">
        <h2>热门文章</h2>
        <ul class="hotinfo">
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留<font color="#43FF73">指纹</font></li>
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留指纹</li>
          <li>本月20日起入境日本须留指纹</li>
        </ul>
      </div>
    </div>
    <div class="right">右侧内容</div>
</div>
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
<div class="footer">footer</div>
</div>
</body>
</html>

示例代码结束

另一种方法如下，上面的较易实现

我们在写 CSS 的时候经常会遇到这样的情况：一个 div#Main 框架内包含 div#Left 和 div#Right，由于左右需要平行，所以我们会写如 CSS 文件里 float:left;、float:right 这样的语句。

而如果 div#Main 又定义了 y 轴循环的背景的话，在老版本的 IE 里是没问题的，但是在其它浏览器以及 IE7 之后的版本中，会出现背景只循环了一小部分。为什么呢？因为在子层应用了漂浮层（float）的话，就会导致 div#Main 的高度失效。怎么解决呢？一般的初学者可能会认为加个 clear:both; 在父层（div#Main）就可以完事了。但是事情不是这样的！高度依然不生效。下面我介绍一下这种情况的解决办法。

在定义了漂浮层的父级定义绝对的宽（width）和高（height）。这里注意一下，并不是只可以用像素~用百分比也是可以的！假如 div#Left 和 div#Right 的 CSS 如下：

CSS代码
  1. #Left {
  2. float:left;
  3. width:30%;
  4. height:100%;
  5. }
  6. #Right {
  7. float:right;
  8. width:70%;
  9. height:100%;
  10. }

那么，div#Main 的 CSS 就要加上以下的语句：

CSS代码
  1. #Main {
  2. float:left;
  3. /*或者 float:right*/
  4. width:100%;
  5. height:100%;
  6. /*用了 padding 的最好是定义绝对的像素（px）*/
  7. }

这样一来，div#Main 的高就可以随着 div#Left 或 div#Right 的最大高度而延伸了。

转载于:https://www.cnblogs.com/200325074/archive/2009/04/09/1432770.html

两列float引起的父容器高度失效的解决办法相关推荐

  1. float元素对父元素高度的影响，img、a及浏览器之间兼容性问题

    问题一:子元素float后导致父元素高度不能自适应计算 解决办法:. 浮动会让子元素脱离文档流,当所有元素都脱离时,此时父元素没有设置高度,导致父元素高度为0        给父元素添加overflo ...

  2. 【转】解决父容器高度不跟随子元素扩大的问题

    原文链接:http://blog.sina.com.cn/s/blog_674379bf0100lyy3.html 方法一: 编写CSS使用DIV的FLOAT属性使元素浮动,在父容器中添加zoom:1 ...

  3. CSS float浮动规则以及父元素高度塌陷的解决方法

    本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...

  4. 父容器高度大于子图片高度的原因

    现象: <!doctype html> <html> <head><title>父容器高度大于子图片高度</title> </head ...

  5. 当子元素用position:relative;时，父元素的overflow:hidden;在ie中失效的解决办法

    当子元素用position:relative;时,父元素的overflow:hidden;在ie中失效的解决办法: 给父元素也加上position:relative; 到现在也不知道为什么会出现这样的 ...

  6. [译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)

    测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...

  7. html制作主体部分,html – 使用CSS制作具有动态面板主体高度的面板填充父容器高度的其余部分...

    我有一个具有页眉,正文和页脚的面板,即使面板主体中的内容溢出,该面板也需要填充屏幕(或其父容器).如果它确实溢出,那么身体将滚动.页眉和页脚高度是动态的,因为它们可能会随着不同的视图端口尺寸而变化,因 ...

  8. 【Css】使用float:left浮动后，导致后面div高度“塌陷”的解决办法（示例和图示）

    正确的样式:在父元素中增加一条:overflow:hidden; 错误的样式: 上图,当"精选推荐"的span使用float:left后,后面的div线顶上去了. 解决办法: 在父 ...

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

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

最新文章

  1. C 语言编程 — 高级数据类型 — 共用体
  2. Ubuntu16.04下arm-linux-gcc交叉编译环境搭建
  3. Intellij IDEA中的Mybatis Plugin破解
  4. python gpu加速 显卡_PyTorch-GPU加速实例
  5. 添加gitlab远程账号 使用注意事项
  6. 微信Android终端SDK新手使用指南
  7. nginx的工作原理及配置
  8. WoMic虚拟麦克风技术剖析
  9. 沈阳建筑大学811c语言真题,沈阳建筑大学C语言试题.doc
  10. linux离线安装apr-util 报错,Linux 编译 apr-util 时报错
  11. Oracle怎么清除视图数据,oracle如何删除视图？
  12. 华为桌面云虚拟机如何安装Ubuntu 20.04.3-live-server
  13. 大数据学习笔记1.3 Linux目录操作
  14. 红米note4x刷机
  15. perl里嵌套shell命令转义符_Linux-包教包会系列之-shell
  16. 字符串的截取爬虫的时候会用到(数组和列表的区别)
  17. 恢复.bat文件的默认打开方式
  18. 生于忧患而死于安乐也
  19. AC上网认证，用户经常说密码错误，怎么排查是否真的是用户密码有问题？
  20. java大学教程习题答案_Java程序设计大学教程：习题解答与课程设计

热门文章

  1. html 语音 懒加载,浏览器HTML自带懒加载技术
  2. ros 机械臂复位_ROS入门学习之八机器人综合应用
  3. EP Limited: 开源ECG分析软件介绍
  4. teechart绘制实时曲线_基于OpenCV的显著图绘制
  5. Git——比较版本区别【git status / git diff】
  6. PAT (Basic Level) Practice1022 D进制的A+B
  7. scala循环 方法与函数
  8. Azkaban流2.0
  9. 再论数据仓库与数据库的区别
  10. zookeeper入门及进阶