当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)
来源:互联网 发布:消防知识知多少作文 编辑:程序博客网 时间:2024/06/04 17:48
例如:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 200px;}#parent {border: 1px solid red;}#child {float: left;}</style></head><body><div id="parent"><div id="child">我是child</div></div></body></html>
效果:
这就是我们经常遇到的问题了,即子级元素浮动的时候父级元素的高度就塌方了……,不过淡定,我们首先就可以想到为父级元素设置高度这种方法来解决的嘛,不过,我们要自适应!自适应!自适应!不要强迫让父级元素站起来,那么,这个时候我们有如下三种方法让父级元素自觉地站起来为子级元素撑起一片天空。
方法一:
这个方法比较常用,即为父级元素添加:
overflow: hidden;
这样就好了,就好了。
虽然这个方法可以解决高度自适应的问题,但是,如果这个时候该父级元素下面同时存在某个子集元素用的绝对定位,而且还定位到这个父级元素的范围外去了,就尴尬了,因为那个绝对定位的子元素(第一部分)找死也找不到了,哎,都是overflow: hidden; 害的,被隐藏了。
就是这样子:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 100px;}#parent {position: relative;overflow: hidden;margin-left: 100px;border: 1px solid red;text-align: right;}#child {float: left;}#child2 {position: absolute;left: -80px;background-color: #0088CC;}</style></head><body><div id="parent"><div id="child">我是child</div><div id="child2">我是child2</div></div></body></html>
这个问题我还是常遇到,不知道你是不是也这有过这样的经历。不过,总有解决的办法嘛。
方法二:
将上面代码中父级元素的 overflow: hidden; 改为:
float: left;
(right也可)
看吧:
这样看来,上面两种方法还是都有缺陷嘛,难道就没有一种能够比较美丽(真的要美丽啊)地解决这个问题的方法吗?有的,有的,我们继续:
方法三:
我们既不为父级元素设置 overflow: hidden; 也不设置 float: left;。我们为父级元素添加如下CSS:
#parent::after {content: "";display: block;clear: both;}
然后,“刷新”一点,哈哈,效果就出来了(同上),其中,display设置为 block或者inline-block都可。而且这方法也很是比较美丽的,然后,就喜欢上它了,哈哈。
阅读全文
1 0
- 当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)
- 浮动元素引起的问题和解决办法?
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- 闭合浮动,元素浮动或绝对定位后失去文档流的友好解决办法
- 围住浮动元素的三种方法
- 围住浮动元素的三种方法
- 围住浮动元素的三种方法
- 围住浮动元素的三种方法
- 围住浮动元素的三种方法
- 围住浮动元素的三种方法
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- 当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失
- css中清除浮动的几种方法(撑起浮动元素父元素的高度)
- 元素的定位与浮动
- 如何居中正常元素、浮动元素以及绝对定位元素
- 全方位清理浮动(解决浮动元素的父元素自适应高度)
- 全方位清理浮动(解决浮动元素的父元素自适应高度)
- 三种方法解决浮动元素父容器高度自适应问题
- LOJ #6006. 试题库 (简单最大流+输出可行路径)
- Android工具类: 基于Zxing的二维码生成和展示
- 7confirm消息对话框
- zepto和jquery的区别
- 剑指Offer——数值的整数次方
- 当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)
- xLua Hello World
- UVA
- 排序算法---选择排序(Selection Sort)
- 深入MTK平台bootloader启动之【 lk -> kernel】分析笔记
- 面对对象
- 学习uboot前奏之hardware-arm基础知识[s3c2440]
- 数据结构 c语言 循环队列实现扑克牌问题
- (九)网络安全--图解TCP/IP读书笔记