`
zerxd
  • 浏览: 73269 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

解决css的float父div没有高度

阅读更多
在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计
view plaincopy to clipboardprint?
<div class='box'> 
<div class='float_left'></div> 
<div class='float_right'></div> 
</div> 
在CSS里定义了如CLASS类这样的浮动后,你会发现父div名box没有高度,所以又时候你可能感觉到父div的margin没有效果,这种情况下,你只需要给父div加个overflow:hidden就可以了,譬如
.box{overflow:hidden} 

W3C OVERFLOW
分享到:
评论

相关推荐

    子div含float,父div高度自适应的div+css布局写法

    div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight

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

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

    div+css float 布局,适配手机

    在高洛峰老师的 `div+css` 视频教程中,他可能详细讲解了如何创建浮动布局,包括设置 `div` 的宽高、设置 `float` 属性、清理浮动(clear floats)以防止父元素高度塌陷,以及如何使用媒体查询进行响应式设计。...

    float元素浮动后高度不一致导致错位的解决办方法

    但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; ...

    CSS浮动属性Float详解 什么是CSS Float?

    空 div 方法是使用一个空的 div 元素来清除 Float,而 overflow 方法是使用 overflow 属性来扩展父元素以包含浮动。 Float 属性是 CSS 中非常重要的一部分,掌握 Float 属性可以帮助我们创建复杂的网页布局。但是,...

    html div没有被撑开的原因及解决办法

    以上就是`html div没有被撑开的原因及解决办法`的主要内容。在实际开发中,遇到此类问题时,应首先分析CSS代码,找出可能影响`div`高度的因素,然后根据上述解决方案进行调整。同时,理解并掌握CSS布局的基本原则...

    CSS教程:div设置float后高度不自动增加

    因为从这个题目我们可以更加容易的看出,如果您没有闭合(清除)浮动元素,它将造成的后果是—–div的高度不能自动增加。言归正传目前用来清除“闭合(清除)浮动”的方法,主要是一下四种:1.额外标签法这种方法就是向...

    DIV+CSS布局:CSS浮动float属性详解[归纳].pdf

    CSS浮动float属性详解 在Web开发中,布局是非常重要的一方面,浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握,我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...

    css 简单例子 div css 简单例子 div

    /* 设置div的高度 */ background-color: #f00; /* 设置背景颜色为红色 */ margin: 10px; /* 设置外边距,让div与其他元素保持一定的距离 */ padding: 20px; /* 设置内边距,增加div内部内容与边框之间的空间 */ ...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    css+div网页模板整站

    《CSS+Div网页模板整站解析》 在网页设计领域,CSS(层叠样式表)与Div元素的结合是构建现代网页布局的核心技术。本资料集合包含了一个完整的网站模板,由十个不同页面组成,旨在为网页设计师提供实用的参考和学习...

    div+css布局大全

    `&lt;div&gt;`元素本身没有特定的语义,它的主要价值在于组织内容和应用样式。 2. **CSS(Cascading Style Sheets)**:CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。CSS控制了...

    CSS3+DIV网页样式与布局从入门到精通(未来科技) 源代码

    ### CSS3+DIV网页样式与布局从入门到精通——核心知识点解析 #### 一、CSS3简介 **CSS3**(Cascading Style Sheets Level 3),即层叠样式表第3级,是用于增强HTML文档表现力的一种样式语言。CSS3在CSS2的基础上...

    精通css+div

    这一章将深入讲解Div的使用,包括如何创建和定位Div,以及如何通过CSS属性(如display、position、float等)实现流式布局、网格布局和相对/绝对定位。同时,还会涉及Div的嵌套和组合,以实现复杂页面结构。 **第8章...

    Div+CSS 样式的使用演示

    但需要注意的是,浮动可能会导致父元素的高度塌陷,因此需要使用清除浮动(Clear Fix)来解决这个问题。一种常见的清除浮动的方法是使用伪类`::after`: ```css .clearfix::after { content: ""; display: table;...

    css float浮动属性使用方法和实例讲解

    css float是一个经常需要使用的css属性,该属性用于设置css...float的作用:通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。本文通过实用案例创建一个水平菜单,使用浮动来创建水平菜单的超链接列表。

    精通CSS与DIV资源管理及素材

    3. **浮动与定位**:CSS的浮动(float)属性常用于创建多列布局,而定位(position)属性(如`static`、`relative`、`absolute`和`fixed`)则允许元素相对于其正常流或父元素进行定位。 4. **响应式设计**:随着...

    css+div自适应窗口宽度

    总的来说,CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助,可以创建出适应不同屏幕尺寸的响应式网页,确保在各种设备上提供良好的用户体验...

Global site tag (gtag.js) - Google Analytics