cssCSS之闭合浮动(清除浮动)
来源:互联网 发布:天正建筑2014 for mac 编辑:程序博客网 时间:2024/05/17 23:40
对于这种因为内部拥有浮动元素而导致parent容器在高度自适应时,只能根据无浮动的元素进行高度的自适应(类似于下种情况):
HTML部分:
CSS部分:
针对以上这种情况,我使用的方法大致为四种:
HTML代码:
CSS代码:
运行效果:
优点:简单,代码少,浏览器支持好
缺点:如果页面浮动布局多,则需要很多空标签
HTML部分:
CSS部分(只有parent的部分发生变化,其余参照最先):
运行效果:与第一种方法相同。
优点:不存在结构和语义化问题,代码量极少
缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度.
HTML部分不变。
CSS部分(新增.parent:after伪对象,其余不变):
运行效果不变。
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
只需给parent容器添加 float:left,也可闭合浮动。
优点:代码少
缺点:会导致整个页面大部分都处于浮动状态,容易出现问题
针对于这4种方法更常用第一种和第三种,这2种方法结果清晰,而且不会发生的大的错误,推荐使用。
0 0
- cssCSS之闭合浮动(清除浮动)
- 闭合浮动(清除浮动)
- 清除浮动&&闭合浮动
- 为何要清除浮动(闭合浮动)
- 关于浮动闭合(清除浮动)
- css清除浮动/闭合浮动
- css闭合浮动、清除浮动
- 清除or闭合浮动
- 闭合浮动元素”或“清除浮动元素
- 什么是浮动?为什么要闭合浮动?怎么清除浮动?
- clearfix清除浮动闭合容器之:after与:before
- clearfix清除浮动闭合容器之:after与:before
- float闭合(清除浮动)和CSS HACK
- float闭合(清除浮动)和CSS HACK
- 万能闭合div(清除浮动float)推荐使用
- CSS清除浮动 万能float闭合
- 清除浮动,并闭合父元素
- 闭合浮动
- matlab批量读入数据
- LSTM 时间序列预测 matlab
- okhttp的使用
- J2EE系列之Hibernate4学习笔记(一)--Hibernate简介
- 快速幂
- cssCSS之闭合浮动(清除浮动)
- VC++6.0 使用TeeChart v8.0 绘制多条曲线及圆滑处理.
- poj2342(树形dp)
- 利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456
- 盛大公司
- 题目三:输入一个链表,从尾到头打印链表每个节点的值。
- webpack学习笔记1
- hbuilder检测不到夜神模拟器 -- 解决办法
- spring 框架说明文档学习记录(3)