`
agile_boy
  • 浏览: 558312 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

由float引起的不能正常计算高度问题

    博客分类:
  • web
阅读更多
  在DIV中使用了
引用
float:left;
,会导致浏览器不能正常现实DIV的height,解决办法很简单,在需要计算搞定的DIV类似的容器中,增加如下CSS属性:
引用
overflow: hidden;width: 100%;

   更详细的说明请看:Clearing floats,那里有介绍原理和更详细的解决办法。
分享到:
评论

相关推荐

    css1--关于float的div撑不起父div的问题

    然而,使用`float`时常常会遇到一个常见的问题,即浮动元素(float div)无法撑起其父元素的高度,导致父元素高度塌陷。这个问题在前端开发中很常见,尤其是在早期的网页布局设计中。本篇将详细探讨这个问题,并提供...

    DIV设置float后父容器无法定位高度的问题解决方法

    但是,当多个浮动元素在同一个父容器内时,它们会脱离文档流,导致父容器的高度不再由这些浮动元素撑开,而是仅根据非浮动内容的高度来计算,这就是所谓的“浮动塌陷”。 为了解决这个问题,我们可以采用以下几种...

    css中float left与float right的使用说明

    3. **高度不一致的并列浮动元素**:多个同方向浮动元素排列时,如果高度不一致,可能导致换行时的布局问题。元素会按照流式布局,但高度较高的元素可能会使后续元素提前换行。 4. **父元素高度自适应**:当所有子...

    CSS布局详解浮动属性Float.docx

    然而,浮动元素可能会引起父元素高度塌陷的问题。如果父元素的所有子元素都浮动了,父元素的高度可能计算为零,导致内容溢出。为解决这个问题,可以使用`clear`属性。`clear`属性有`both`、`left`、`right`和`none`...

    css浮动 float属性详解

    1. **父元素高度塌陷**:当子元素浮动后,它们不再占据父元素的高度,可能导致父元素的高度计算错误,即高度为0。这可能会引发后续元素的位置异常。 例如: ```css .box { border: 1px solid #666; width: 800px;...

    数学建模高跟鞋问题分享.pdf

    "数学建模高跟鞋问题分享.pdf" 在这个数学建模问题中,我们讨论了高跟鞋的选择对女性...此外,这个问题还可以引发更多的讨论和应用,例如关于裙子长度与高跟鞋搭配的问题、关于芭蕾舞演员脚的大小会更漂亮的问题等等。

    YYKit的一些使用总结

    例如,当YYTextView的superView是UIScrollView时,可能会出现一些渲染上的问题,因为UIScrollView的滚动和YYTextView的文本绘制在同一个渲染周期内可能发生冲突,从而引起渲染错误。这需要开发者进行相应的调试和...

    父级元素未设置高度和宽度时高度塌陷问题的解决方法

    当子元素浮动后,它们不再占据父元素的空间,导致父元素的高度计算为零,从而引发高度塌陷。这个问题对于页面布局和视觉效果来说是具有破坏性的,因为父元素可能无法正确显示背景色或边框。 解决“高度塌陷”有多种...

    老生常谈css中float的用法

    CSS中的`float`属性是一个非常...然而,它会引发父元素高度丢失的问题,需要通过`clear`或`clearfix`方法来解决。虽然现代布局技术正在逐渐取代`float`,但了解和掌握`float`的用法对于理解CSS布局机制仍然至关重要。

    TextView限制最大行数,多出部分显示略号,ellipsize="end"失效问题解决办法

    但是,当同时设置了`maxLines`(最大行数)属性时,如果`TextView`的高度不足以显示所有行,`ellipsize`可能不起作用。这是因为`TextView`可能没有正确计算其高度,导致省略功能不生效。 为了解决这个问题,我们...

    firefox不显示border通过清除float便可解决

    这样做的结果是父容器会正确计算高度,包含边框在内的所有样式都将正常表现。 通过上述说明,我们可以了解到,在进行网页布局设计时,要特别注意清除浮动带来的影响。这种影响不仅会影响到边框的显示,还可能影响到...

    浏览器兼容性问题汇总_web前端_html_css.pdf

    5. **浮动元素引起的3像素间距问题**:在IE中,当左侧元素浮动且右侧元素使用外边距定位时,右侧文本与左侧会有3像素的间距。解决方法是在IE特定的CSS中为左侧元素添加负的`margin-right`。 6. **浮动元素的闭合与...

    .clear方法解决网页自适应高度的问题

    `clear:both`属性指示元素不应与任何浮动元素在同一行内显示,因此强制父元素重新计算高度,以包含这个清浮动的元素。这样,父元素就能正确地包裹住所有子元素,无论这些子元素是否浮动。 在IE(Internet Explorer...

    浅谈c# 浮点数计算

    在C#编程语言中,浮点数计算是一个常见的任务,但同时也存在一些潜在的问题,主要源于计算机对浮点数的内部表示和计算精度的限制。本文将深入探讨这些问题,并提供解决方案。 首先,让我们理解为什么在C#中0.1 + ...

    实际工作总结的CSS兼容解决办法

    浮动(`float`)和清除(`clear`)在处理布局时易引发问题,如浮动元素父级高度塌陷。使用clearfix类或`display:flex`(需考虑对老版本浏览器的兼容性)可以避免这类问题。 对于选择器的兼容性,尽量避免使用高级...

    图片过大引起的内存溢出解决方案

    1. **使用inJustDecodeBounds选项预加载图片信息**:首先设置`BitmapFactory.Options`中的`inJustDecodeBounds`属性为`true`,这样`BitmapFactory`只读取图片的边界信息(宽度和高度),而不真正解码图片数据。...

    css兼容性.pdf

    然而,不同浏览器对CSS的解析方式存在差异,特别是老版本的Internet Explorer(如IE6)常常引发一系列兼容性问题。理解这些问题的本质并掌握解决策略,对于任何前端开发者来说都是至关重要的。 首先,DOCTYPE声明...

    css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx

    IE和Firefox对盒模型的处理方式不同,这可能导致元素的宽度和高度计算错误。了解并适当地使用`box-sizing`属性可以帮助解决这个问题。 10. **使用浏览器特定的前缀**: 对于一些高级CSS特性,如`transition`、`...

    span掉落的演示代码

    1. **行内元素的高度计算**:内联元素的高度不包括内边距和边框,除非它们被转换为`inline-block`。因此,如果`span`或`div`设置了`inline-block`并且包含文本,它们的高度可能不足以容纳所有内容,导致排版错位。 ...

Global site tag (gtag.js) - Google Analytics