关于浮动元素float使其父元素高度塌陷的原因及解决方法
来源:互联网 发布:淘宝类目怎么选择其他 编辑:程序博客网 时间:2024/04/30 08:49
浮动元素使其父元素高度塌陷
- 我们经常会遇到一种情况,给一个元素设置浮动之后
float:left/right;
,如果该元素的父元素有背景颜色,那么会发现父元素的背景颜色消失了;如果父元素有一个边框,那么浮动元素无法将边框撑开。
从以上两张图中可以看出添加浮动元素后,li元素按照规则横向排列,但是父元素却消失不见了。
为父元素添加一个5px的边框,在li元素添加浮动后,边框并没有被内容撑开。
在第一个示例中仿佛父元素消失了,但在第二个示例中发现其实父元素并没有消失,只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后,会自动脱离文档流”,翻译成白话就是说,元素浮动后,就不在整个文档流的管辖范围,那么它之前存在在父元素内的高度就随着浮动不复存在了,而此时父元素会默认自己里面没有任何内容(前提是未给父元素设置固定高度,如果父元素本身有固定高度,就不会出现这种情况)
解决方法:
1、给父元素也添加float
。这样让父元素与子元素一起脱离文档流浮动起来,保证子元素在父元素内,这样父元素就能自适应子元素的高度,但是此方法有一弊端,一定会影响父元素之后的元素排列,甚至影响布局。
2、给父元素一个固定高度,此方法适用于子元素高度已知并且固定的情况。
3、添加一个块级元素,并给此元素设置clear:both;
清除浮动。在很早之前用的就是这种解决办法,新建一个空的div,为这个div设置clear:both;这样无疑是增加了无意义的标签,一个大型页面中,这种标签太多是不好的。
4、给父元素添加 overflow:hidden;
【后有详解】
5、通过伪类::after清除浮动 【后有详解】
overflow:hidden;
- 隐藏溢出,当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉,使页面更加美观
- 清除浮动,当子元素浮动时,给父元素添加overflow:hidden,按照它的第一个特性,应该将子元素超出的部分截掉,但是因为子元素有浮动,无法裁剪,所有只能由父元素增加高度去包裹住子元素,使得父元素拥有了高度,而这个高度是跟随子元素自适应的高度,这样就把浮动的子元素包含在父元素内了。
::after 伪类
- 利用伪类来清楚浮动,其效果跟创建一个空的div并设置其为clear:both;是一样的,只不过这里用伪类代替了空的div元素
<div class="box"> <div class="son">我是浮动的子元素</div></div>
.box { width:400px; background:#F00;}.son { float:left;}.son::after { content:""; clear:both;/*清除浮动*/ display:block;/*确保该元素是一个块级元素*/}
2 0
- 关于浮动元素float使其父元素高度塌陷的原因及解决方法
- 使用float浮动之后,父元素“塌陷”的解决办法
- 浮动元素的父类高度塌陷问题
- css中float引起父元素的高度塌陷
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- css之子元素浮动导致父元素高度塌陷解决方案
- CSS中子元素浮动导致父元素高度塌陷解决方案
- 【css】浮动的影响及解决方法(父元素无高度,而子元素有高度)
- css防止浮动元素父元素高度塌陷的三个方法
- 父级元素未设置高度和宽度时高度塌陷问题的解决方法
- PHP界面复用以及利用after伪类元素清除浮动float所产生的塌陷
- 清除浮动--子元素float导致父元素height塌陷解决方案
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- 解决float造成的父元素塌陷问题
- float导致父级元素塌陷的问题
- 子元素用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
- 子元素浮动,父元素高度为0解决方法
- 优化之内存缓存memcache
- jvm性能调优
- poj 1308 Is It A Tree?(并查集)
- new&&delete 与 malloc&&free 的基本结构
- iOS开发技巧之:相册中的GIF图片的读取与保存
- 关于浮动元素float使其父元素高度塌陷的原因及解决方法
- 创建刚体与发射销毁
- 原子操作
- springmvc 依赖的jar包 maven的pom.xml文件
- URL和URI的区别和关系
- Eclipse中将Java项目转换成Web项目的方法
- SSM框架——以注解形式实现事务管理
- Ajax的4条线
- 用ASP.NET实现简单的超市管理系统-商品主页面