`
redloves
  • 浏览: 21051 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

CSS+DIV排版时容器内对象全部设置了float属性后容器不能自动适应高度的解决方案

CSS 
阅读更多

当一个DIV容器中的所有对象都设置了float属性后,容器不能自动适应高度。

解决的方法有两个:

  1. 在容器的最后添加一个空的DIV标签,设置其样式clear:both,然后隐藏这个DIV。
  2. 设置容器的样式overflow:hidden/auto以及zoom:1(zoom属性是为了兼容IE6)。
分享到:
评论

相关推荐

    精通CSS+DIV网页样式与布局视频教材

    11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 12.2 实例一:蓝色经典 12.3 实例二:清明上河图 12.4 实例三:交河故城 12.5 自动选择CSS样式 第3部分...

    使用CSS的overflow属性防止float撑开div的方法

    例如:div元素内的两个子元素p都float:left,外面的div会变成没有高度,此时该怎么办呢?通常解法是在排版流里面的元素加一个after的伪元素,将它设成display: block以及clear:both即可解决。 CSS Code复制内容到...

    精通JavaScript+jQuery Part1

     11.6 div排版与传统的表格方式排版的分析   第12章 CSS+div美化与布局实战   12.1 框架搭建   12.2 实例一:蓝色经典   12.3 实例二:清明上河图   12.4 实例三:交河故城   12.5 自动选择CSS...

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

    7.7 高度不适应 7.8 IE6断头台问题 7.9 容器不扩展问题 7.10 IE7浏览器的一些变化 第8章 CSS可视化开发与调试 8.1 Dreamweaver 8的CSS可视化开发 8.1.1 对CSS支持的界面变化 8.1.2 可视CSS辅助功能 8.1.3 浏览器检查...

    CSS div布局需要注意的两点

    1.一个大的div里面长宽给定,内部又存在一个新的div,这个div不能完全放在父div中。那么就会overflow。但是,这里overflow的部分对于与父节点平行的兄弟div中,在排版上可视为脱离文档流。 或者说,可以这么简单的...

    6个盒子的CSS代码变换

    有6个DIV,每一个的classname分别为b1,b2,b3,b4,b5,b6 按顺序排列,改变不同的CSS可以令布局发生改变。 例子,以下CSS代码可以令6个div按井字排列: .b1{ float:left;width:290px; height:300px; margin-right:10px} ...

    《精通Javascript+jQuery》光盘源码

     3.7 CSS设置超链接效果  3.8 CSS制作实用菜单  3.8.1 项目列表  3.8.2 无需表格的菜单  第4章 ccCSS进阶  4.1 标记与标记  4.1.1 概述  4.1.2 与的区别  4.2 盒子模型  4.3 元素的定位  4.3.1...

    解决在ie6中,图片下方出现空隙的办法

    由于浏览器的不同,我们在使用div+css排版中、难免会遇到许多这样那样的问题。在ie6中,图片的下方会出现多余的空隙。如何来解决这个问题呢? 其实解决这个问题有很多种方法。可以设置图片的浮动属性float:left/...

    html之CSS设计(float定位和position定位详细分析)

    今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多。 一、float浮动 1、文档流 指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。...

    文字环绕图片的布局效果(使用动态div实现)

    CSS的float属性,有left,right。 那么,如果我想让图片浮在中间呢?有没有float:middle呢? 貌似是没有勒。 最新的CSS3的分栏属性(http://www.w3.org/TR/css3-multicol/)可以让文字分栏,然后再让图片左浮右浮,...

    web实验报告.doc

    实验报告书 课程名:《Web应用开发技术》 题 目:实验五 用CSS进行文字与图像排版 班 级: 学 号: 姓 名: 实验五 用CSS进行文字与图像排版 一 实验目的 掌握盒子模型的概念 掌握盒子模型相关的CSS属性 掌握文本控制...

    CSS高级技巧:文字环绕图片

    上一篇CSS教程 文章:CSS高级技巧:滑动门文字环绕图片(SandBags)在印刷业中, 常用的文字图片混搭的排版法被延伸到了Web视觉设计中, 如何来完成呢?这里说的并不是简单的文字包围图片, 不过原理很类似, 同样是通过...

    思库教育PHP零基础培训+进阶课程+PHP项目开发实战 21G PHP零基础学习视频教程.txt

    │ │ │ ├[思库教育]JS 第11集 字符串(对象)常见属性.avi │ │ │ ├[思库教育]JS 第12集 Math对象.avi │ │ │ ├[思库教育]JS 第13集 Date对象.avi │ │ │ ├[思库教育]JS 第8集 关联数组.avi │ │ │ └...

    CSS:闭合元素和浮动元素的差别

    提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,... float属性在页面排版上非常有用,但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元

    js实现简单的点名器随机色实例代码

    布局(排版) <body> <button onclick=star()>开始</button> <button onclick=stop()>结束</button> <div id=box> </div> </body> css样式 <style> #box{ width:...

Global site tag (gtag.js) - Google Analytics