为何要清除浮动(闭合浮动)
来源:互联网 发布:知豆郑州总代理 编辑:程序博客网 时间:2024/05/21 14:57
在文档中存在几种不同的元素表现形式,一种是正常状态,还有两种是设置浮动或者定位的状态。浮动之后的元素,通常我们需要“闭合浮动”,那么闭合浮动的意义何在呢?作为定位又是否脱离了文档流呢?
CSS中的定位机制
普通流,浮动,定位。
普通流:
普通流 (normal flow),或者称之为常规流。也是我们通常称呼的“文档流”。
浮动:
浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局,只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样。
当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
定位:
绝对定位(absolute):脱离普通流,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。可以层叠默认是要比普通流 和浮动元素z-index高。
相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。但是不会脱离普通流相对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。
- 为何要清除浮动(闭合浮动)
- 闭合浮动(清除浮动)
- 清除浮动&&闭合浮动
- cssCSS之闭合浮动(清除浮动)
- 什么是浮动?为什么要闭合浮动?怎么清除浮动?
- 关于浮动闭合(清除浮动)
- css清除浮动/闭合浮动
- css闭合浮动、清除浮动
- 清除or闭合浮动
- 闭合浮动元素”或“清除浮动元素
- 浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
- 浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
- float闭合(清除浮动)和CSS HACK
- float闭合(清除浮动)和CSS HACK
- 万能闭合div(清除浮动float)推荐使用
- CSS清除浮动 万能float闭合
- 清除浮动,并闭合父元素
- 闭合浮动
- 【转】python类、对象、方法、属性之类与对象笔记
- JavaScript基础(14.输入框实例)
- Java程序员应当知道的10个面向对象设计原则
- ExtJs gridPanel添加数据
- socket长连接,断线重连案例
- 为何要清除浮动(闭合浮动)
- Python基础-使用__slots__
- C++开发者都应该使用的10个C++11特性
- Mac下配置perl的DBD::MySQL模块
- 解析外层为数组的json串
- 18. 4Sum
- Android创建或删除了文件,在电脑端或有些程序查看不显示
- java实现子网掩码转换为网络标识位
- 快乐抓娃娃