子元素浮动让父元素塌陷解决办法
来源:互联网 发布:已备案域名购买转入 编辑:程序博客网 时间:2024/05/16 11:28
父元素没有给固定高度,子元素设有固定的高度,但是父云素也没有被子元素的高度撑开。子元素浮动了,而浮动属性会使元素脱离文档流,即子元素设置float属性后,当前的html文档会当作元素不存在一样,所以可以看作父元素内根本没有内容,高度当然也就撑不开。
解决办法:
1.设置父元素float属性;这样,父元素也是脱离当前文档流,子元素和父元素一起脱离,并且子元素仍在父元素内,父元素内容不空了,所以高度会适应子元素高度。
2.不要浮动,子元素使用display:inline-block;
3.在最后一个设置浮动的子元素后加一个空div,清除浮动;
4.父元素设置overflow:hidden属性;
5 .使用after伪对象清除浮动 ;
推荐后面3种方法。
针对方案4还可以这样:
如果在父元素内要左右排列且不让父元素坍塌,可以这样改,将左边的子类设置为float,右边的子类设置为overflow:hidden属性。如下代码所示:
0 0
- 子元素浮动让父元素塌陷解决办法
- 子元素浮动让父元素塌陷解决办法
- 子元素浮动让父元素塌陷解决办法
- 使用float浮动之后,父元素“塌陷”的解决办法
- 清除浮动--子元素float导致父元素height塌陷解决方案
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- css之子元素浮动导致父元素高度塌陷解决方案
- CSS中子元素浮动导致父元素高度塌陷解决方案
- 浮动元素的父类高度塌陷问题
- IE float浮动 子元素不能撑开父容器 解决办法
- 子元素浮动 父元素自适应高度
- 关于子元素浮动父元素高度为零的解决办法
- css防止浮动元素父元素高度塌陷的三个方法
- 关于浮动元素float使其父元素高度塌陷的原因及解决方法
- 子元素用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
- margin塌陷问题:父元素与子元素之间的margin-top问题
- 子元素浮动,父元素高度为0解决方法
- 子元素设置浮动样式,父元素高度为0
- Snapkit使用
- wcf死锁
- IEEE802.1as与1588区别
- [RK3288][Android6.0] Audio录音HAL层的初始化流程分析
- Activity_启动模式
- 子元素浮动让父元素塌陷解决办法
- CodeForces 609DGadgets for dollars and pounds
- Ubuntu安装搜狗拼音教程
- 什么叫上CPU
- Visual Studio 2010中的C++程序调用matlab程序代码 混合编程
- 数据库的insert\update\delete\select查询
- mongodb的简单用法
- 面试常见排序算法(上)
- JAVA是编译型语言,还是解释型语言?