第六课-浮动样式详解

第六课-浮动样式详解

一、浮动样式的由来

浮动

最开始的开始的时候 图文布局

和display有区别：

1,没有空格解析

2,行内是以基线对齐的,使用margin-top会是行内块全部下移;

3,浮动没有基线问题

4,不能控制方向

二、默认元素普通流布局

文档流?

就是页面的布局 在第一层

​ 浮动在1.5层

​ 设置浮动元素 飘到1.5层

​ 改元素原先的位置,就没有,浏览器会让其他的元素补上

​ 本来你前面有个人挡着，然后他飞升了，你就可以顶位置了

​ 自己也飞升,前面那个飞升的还是排在前面,

​ 文字虽然没飞，但是他长得高 长到1.5

​ 文字不会被浮动覆盖

三、浮动样式的核心原理

（一）网页布局视角转换

（二）浮动样式原理

（三）左右浮动样式原理

（四）浮动样式原理详讲

（五）浮动样式重点

重点：
浮动元素之间不会覆盖彼此
具有和文本环绕相同的特性，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列

浮动的定义

设置浮动的元素 :遇到父级或者相邻的浮动元素,会让浮动停止在当前位置,

​ 如果上一个元素是标准流的元素,那么这个浮动元素相对垂直位置不变

​ 相邻的浮动元素元素会并排在一行

​ 标准流 就是我们的文档流

1,控制方向

2,相邻的浮动元素元素会并排在一行,

3,父级宽度不够,元素会被挤到下一行

4,文字能感受到浮动的位置,

5,浮动会将元素改变成块元素类型,

（六）行内元素浮动样式设置

四、浮动样式延伸点

（一）浮动样式父元素高度塌陷

（二）浮动样式父元素高度塌陷解决方案

1,设置宽高

2,overflow:hidden 为什么能解决父级高度塌陷

​ 触发机制 bfc机制

​ 给父级添加了一个容器,肉眼看不见,浏览器能感知到,

​ bfc机制生成一个单独隔离的虚拟容器,

​ 容器不会影响外面的布局,外面的布局不会影响里面

float:left right

display:inline-block;

​ 虚拟容器能检测被浮动的单位;

块级特性

​ 高度不写,由里面的内容撑开

3,使用一个伪元素,

​ :befoer 在正文之前添加内容

​ :after 正文之后添加内容

清除浮动

clear;left 左 左侧抵抗浮动 只能清除左浮动 设置了清除浮动 左侧不能有浮动

​ right 右 右侧抵抗浮动 只能清除右浮动

​ both 两侧

（三）clear样式详解