前言
就简单说说css中的浮动吧……
1.什么是浮动以及产生脱离文档流的原因
我们可将所看到的网页视作一张白纸也就是文档流,在这张白纸的表面所罗列的元素一旦添加float属性,就会从这张白纸上跃然而起也就是脱离了文档流,此时就产生了脱离文档流的现象。
2.浮动的作用及其float可选值
通过来设置浮动可以使一个元素向其父元素的左侧或右侧移动
(可以使元素横向排列)
使用 float 属性可设置元素的浮动
可选值: float:left/none/right
none 默认值,元素不浮动 left 向左浮动 right向右浮动
注意:元素设置浮动以后,水平布局的等式不需要强制成立,元素设置浮动以后,会完全从文档流中脱离,不再占用文档流得位置,所以元素下边的还在文档流中的元素会自动向上移动
3.浮动的特点
- 浮动元素会完全脱离文档流,不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时不会超过它前边的其他浮动元素,会和前面的元素并列
- 浮动元素的上面是一个没有浮动的块元素,则浮动元素无法上移
- 浮动元素不会超过他上边的兄弟元素,最多就是和它一样高
- 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果。
4.元素脱离文档流的特点
元素设置浮动以后会从文档流中脱离,元素的一些特点也会发生变化
例如:
- 对于块元素
- 块元素不再独占页面的一行
- 脱离文档流以后,块元素的宽度和高度默认都被内容撑开
- 对于行内元素
行内元塑脱离文档流以后会变成块元素,特点和块元素一样
总结
写的不好,欢迎指导!