第九章 浮动
2020-11-26 本文已影响0人
扶光_
一,浮动样式的使用
-
以前浮动是用来图文布局的文字环绕效果如下图所示:
例1
-
而现在多用于块级的页面布局 如下图:
例2
二,浮动的特点
写法:float:left / right; 左浮动/右浮动
1.会使元素脱离文档流
下面来演示一下浮动的作用
<div class="a">第一个盒子</div>
<div class="b">第二个盒子</div> 首先我们先设置三个盒子并加一些样式,以便更好看出浮动的特点
<div class="c">第三个盒子</div> 结果如下图:
例3
下面我们将第一个盒子添加float:left;看看是什么样子
将第一个盒子添加浮动
- 这就是浮动的第一个特点:会使元素半脱离文档流
下面可能会有人说什么是文档流呢?
就好比如我们上课的教学楼有一楼和二楼,文档流相当于在一楼，我们将元素浮动起来,浮动的元素位置就是在一楼和二楼中间的位置
2.遇到父级或相邻的元素有设置浮动样式的,会停止浮动
还是上面的例子。我们将三个盒子都添加浮动样式会变成什么样子呢？看下图。
例5
很明显这三个盒子会并排在一行,
- 这就是浮动的第二个特点:遇到父级或相邻的元素有设置浮动样式的,会停止浮动
3.使行内元素具有宽高,支持margin但不支持居中
大家都知道span标签是行内元素,他是不支持宽高和margin的,但如果我们给他设置一个浮动,我们来看span元素是否支持了宽高和margin.
span{
float: left;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
<span >
我是行内元素
</span>
例6
注意:不支持居中
- 这就是浮动的第三个特点:使行内元素具有宽高,支持margin但不支持居中
4.宽高由内容撑开
这里小编就不一一演示了,可以自己做实验证明一下
5.文字会感受到浮动元素的位置
将第一个盒子设置浮动,第二个盒子加文字,如图所示:
例7
文字会贴在有浮动的盒子旁.
- 这就是浮动的第五个特点:文字会感受到浮动元素的位置
三,浮动的缺点
父级的浮动高度塌陷
计算不到元素的大小,因为它漂浮到了半空中
解决方法(三条)
- 1.给父级设置高度
- 在父级使用overflow:hidden; 浏览器会触发bfc,单独又隔离的容器.会生成一个虚拟边框来计算浮动元素的宽高,
- 使用幽灵元素生成空间
before 元素前面生成一个空间 伪元素
after
::after{
content:" ";
display:block;
clear:both;
}
四,清除浮动
clear:float 左边不能有浮动 只针对左浮动生效
clear:right 右边不能有浮动 只针对右浮动
clear:both; 一般使用这个
五,float 和display:inline-block的区别
第一个区别:
display 会有空格
float没有空格,不会影响布局
第二个区别:
display:inline-block不能选择方向
float可以选择方向
第三个区别:
基线问题
如果用display:inline-block,然后希望将某一个元素向下移动,整体都会下移
下面来演示一下这个问题,我们首先来设置三个盒子,然后将第二个盒子下移50px;
例8
解决方案:
vertical-align:top 要将所有的行内块设置一样的基线就可以解决这样的问题
设置了vertical-align
-
而浮动就不需要考虑这样的问题
扩展一个小bug
bug:浮动元素卡住了怎么办
高度问题::好好检查浮动的高度!!!
