关于浮动的影响及处理方案
来源:互联网 发布:树莓派 nginx 编辑:程序博客网 时间:2024/06/15 10:32
一、属性:float,属性值left、right、none
1. left:元素向左浮动
2. right:元素向右浮动
3. none:元素不浮动,默认
二、什么是浮动:所谓浮动就是指设置了float属性的元素会从标准文档流中脱离出来,在浮动流中按照新的排列规则进行排列
1. 标准文档流:所谓标准文档流就是页面默认的排列规则,如果是块元素垂直显示,如果是行内元素或行内块元素在一行显示
2. 浮动流:所谓浮动流就是设置了float属性的元素会从标准流中脱离出来,在标准流的上方新建一个层,在这个成里所有元素都是在一行显示的,我们把这种排列规则称为浮动流
三、浮动所带来的影响
1. 设置了浮动属性的元素会从标准流中脱离出来,它会失去在标准流中的原有位置,该位置会被标准流中的其它元素占据
2. 在浮动流中所有元素都是在一行显示的,但是如果空间不够大,那么元素自动换行
3. 浮动的元素自动变成块元素
4. 浮动的元素宽度为最小宽度,所以为了方便控制,通常给浮动的元素加width
5. 浮动的元素会丢失标准流中的原有位置,标准流中的其它元素会占据它的空间,但是文本会对它形成环绕
6. 一个元素在浮动前会分析它前面的元素的类型,如果是块元素,那么这个元素会在块元素的下方显示
7. 元素都向右浮动后,显示顺序为倒叙
四、父元素的塌陷:如果父元素没有高度,那么此时父元素的高度就是由子元素决定的,如果子元素设置了浮动,那么父元素的高度就会塌陷,父元素的背景色无法显示,另外也会对周边元素造成影响
1. 给父元素设置高度
2. 利用clear属性来清除浮动所带来的影响,clear属性的作用就是清除浮动,属性值为left /right/both/none
1) left:清除左侧的浮动
2) right:清除右侧浮动
3) both:清除两侧浮动
4) none:默认,不清除浮动
3. 利用:after选择器清除浮动,格式:父元素:after{content:””;display:block;clear:both;}
五、浮动的利用
1. 页面布局
2. 制作页面中各个模块
- 关于浮动的影响及处理方案
- 关于取消浮动影响的多种方法及优缺点比较
- 关于CSS浮动的影响
- 关于SpringOpenSessionInViewFilter的配置及处理方案
- 浮动造成的影响
- 清除浮动影响的方法
- 个人关于css中几种取消浮动对于其他元素影响的见解
- 清除浮动的一些方案
- 清除浮动的一些方案
- 【css】浮动的影响及解决方法(父元素无高度,而子元素有高度)
- android 关于蓝牙间通信,及RFID设备读写芯片问题的处理方案
- 清除浮动的影响的方法
- 浮动布局所带来的影响以及如何清除浮动
- 浮动布局所带来的影响以及如何清除浮动
- 浮动布局所带来的影响以及如何清除浮动
- 浮动布局所带来的影响以及如何清除浮动
- 浅谈css中浮动和清除浮动带来的影响
- 浅谈css中浮动和清除浮动带来的影响
- Singleton
- 多线程之Callable接口及FutureTask源码分析
- Java集合框架之_Collection接口
- Spring整合Hibernate
- JavaScript-DOM(上篇)
- 关于浮动的影响及处理方案
- JavaScript笔记(AJAX 与 JSONP)
- Redis源码阅读笔记—sds
- NDK示例:Teapot
- 二分法实现一个整形有序数组的二分查找
- 用python库调查网站背景
- SQLite高级操作
- 背景 尺寸 隐藏
- Unity3D学习记录——API实例化与销毁1