浮动元素引起的问题和解决办法?
来源:互联网 发布:燃气管网优化现状 编辑:程序博客网 时间:2024/04/29 13:46
浮动元素引起的问题:
1. 父元素的高度无法被撑开,影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决方法:
使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:
1
2
.clearfix:after{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;}
.clearfix{
display
: inline-
block
;}
/* for IE/Mac */
清除浮动的几种方法:
1. 额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
2. 使用after伪类
1
2
3
4
5
6
7
#parent:after{
content
:
"."
;
height
:
0
;
visibility
:
hidden
;
display
:
block
;
clear
:
both
;
}
3. 浮动外部元素
4. 设置 overflow 为 hidden 或者 auto
阅读全文
0 0
- 浮动元素引起的问题和解决办法?
- 浮动元素引起的问题和解决方法
- 浮动引起的高度问题
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- 当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)
- 浮动元素后的非浮动元素问题
- 解决IE6浮动元素产生的“双边距”BUG问题及解决办法
- 解决由设定边距引起的“浮动滑移”问题
- 浮动元素容器的clearing问题
- 浮动元素的垂直居中问题
- IE6下注释引起的文字溢出和浮动错位
- 浮动元素问题
- Css_浮动元素外层容器无高度的解决办法
- 定义了浮动元素后margin-bottom失效的解决办法
- 使用float浮动之后,父元素“塌陷”的解决办法
- 探讨CSS中元素浮动后,文字环绕于浮动元素周围,没有与浮动元素重合的问题
- 闭合浮动,元素浮动或绝对定位后失去文档流的友好解决办法
- table元素引起的
- fresco 加载本地gif图片
- iOS开发
- GCD死锁的一点点理解
- PHP 表单验证
- Chunky Monkey 猴子吃香蕉, 分割数组
- 浮动元素引起的问题和解决办法?
- BigDecimal 使用方法详解
- 《Java编程思想》测试数据
- 9月第四周
- 第二章、对象及变量的并发访问 之 synchronized 同步方法(2)
- js 对象克隆
- Two Sum
- ant+junit执行自动化并且生成report报告
- redis在Linux上的安装