float div高度自适应

简介:

float div高度自适应(解决div float后,父div高度无法自适应的问题)


在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法:


额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。

这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人比较喜欢这种方法,因为它简单、实用、浏览器兼容性好,而且这种方法也是W3C推荐的方法

1
< div  style = "clear:both;" ></ div >

      或者使用

1
< br  style = "clear:both;"  />


注意:考虑到浏览器兼容,须将以上代码放至“父div”内。


 

      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1221990,如需转载请自行联系原作者



相关文章
|
移动开发
快应用div纵向排列-----快应用无法使用float
在开发快应用布局时,要兼容各种大小屏幕的div的纵向排列,传统h5过度过来的同学会用到float:left但是在快应用中无法使这类写法生效 这时需要使用以上方向代替:display: flex; flex-direction: column; padding:20px; 此方法请写在需要纵向排列元素的父div中。
1152 0
快应用div纵向排列-----快应用无法使用float
|
容器
子div设置float后会导致父div无法自动撑开
注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
907 0
|
前端开发
子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度。   对父级div标签闭合前加一个clear清除浮动对象。 父div不自适应高度实例 .
796 0
|
前端开发
(转)CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。
943 0
|
Web App开发 容器
Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug
Container: padding: 20px; Float Float Clear 在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。
574 0
|
Web App开发 容器
Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug
Container: padding: 20px; Float Float Clear 在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。
|
7月前
|
存储 Java
百度搜索:蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储,float和double类型可以表示非常大或非常小的浮点数,并且具有一定的精度。然而,由于浮点数的特性,它们在进行精确计算时可能会存在舍入误差。在编写Java程序时,需要注意使
102 0