浮动 float
由来:
为实现文本环绕效果而产生,后用于快级元素横向并排布局
(优于display:inline-block;)
格式:
- 标注文档流排布:依次从上至下默认排布.
- 给盒元素设置float–脱标:脱离标准文档流.
- 浮动元素不存在解析空格默认顶端对齐.
代码:
float:left;(从左往右排布)
float:right(从右往左排布)
浮动元素无法通过float居中.
特性:
- 浮动元素会托起盒内内容.
- 浮动的元素父级不设置宽度,内元素会往下掉.特性:
- 文本环绕
- 浮动的高度塌陷
- 块级化:将元素强行转化为块级元素而是由里面的元素撑开的,这是浮动的包裹性
- 换行方式:
- 有多个浮动元素的情况下,多个盒子浮动,会从左往右依次排列,如果当前行排不下,会换行排列.
- 它具有块元素的所有性质,但是不具有独占一行和父元素宽度100%的特性
从第一个元素开始进行浮动排列,依次水平浮动,直到最后一个元素 - 如果当前行排不下,会原地向下缩直到可以有空间可以浮动排列,不会再往上走了
浮动样式的重点:
- 浮动的元素不会覆盖彼此
- 具有和文本环绕相同的特性,一个浮动元素后面的行内元素首先按照文本环绕效果进行排列.
行内元素浮动样式的设置:
- 图片脱离标准文档流
- 默认顶端对齐