最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS中 浮动float 高度自适应
时间：2022-06-25 09:02:28 编辑：袖梨 来源：一聚教程网
先来看一个示例效果的对比：
这是清除浮动之前的效果。可以明显看到column1,column2,column3这三个浮动元素的父级元素的高度并没有被撑开。
这就是我们所要达到的效果，可通过下面的三种方法来实现。
方法一：
在浮动层最后一个浮动元素的后面多加一个元素来清除浮动即可，这是最简单也是最直接的方法。唯一的缺点就是在一定程度上改变了文档流结构。
html代码：
| 代码如下 | 复制代码 |
column1 column2 column3 |
|
css代码：
| 代码如下 | 复制代码 |
|
|
|
方法二：
此方法需要依赖于下面两行文档类型的声明:
| 代码如下 | 复制代码 |
css代码:
| 代码如下 | 复制代码 |
|
#demo {border: 1px black dashed;} .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} [xmlns] #demo {overflow:auto;} /* For IE7+ and non-IE */* html #demo {height:1%; } /* IE only */ |
|
方法三：
非IE浏览器利用伪类 :after，IE浏览器利用其特有属性zoom。
css代码：
| 代码如下 | 复制代码 |
|
#demo {border: 1px black dashed; zoom: 1; /* IE only */} |
|
overflow解决float浮动后高度自适应的问题
经发现可以采用overflow来解决！方法是在父元素加上如下代码即可：
overflow:auto;zoom:1;
“overflow:auto;”是让高度自适应，“zoom:1;”是为了兼容IE6，也可以用“height:1%;”来解决。
完整的代码如下：
| 代码如下 | 复制代码 |
header 城市导航
热门文章
右侧内容 |
|
实例参考 http://www.111com.net/js_a/87/43100.htm
要注意以下几点：
1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。
2、 浮动元素后边的非浮动元素显示问题。
3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。
4、子元素全为浮动元素的元素高度自适应问题。
相关文章
- 逆水寒手游橙戒流火幻荧什么时候上线 04-25
- 原神仆人阵容搭配推荐 04-25
- 恶意不息铁匠铺怎么升级 04-25
- 原神龙蜥特急斯库拉号成就怎么达成 04-25
- 恶意不息浅滩双子掉落什么 04-25
- 原神仆人阿蕾奇诺武器推荐 04-25