一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情。
简述浮动float
现在22年,个人觉得以后开发可能很少会用到浮动,应该大部分都是使用flex弹性布局和定位来实现,所以这里简单阐述一下浮动(不过审的话只能写多一点了😓)
1.为什么需要浮动?
没记错的话,浮动诞生初是用来做文字环绕效果的。很长一段时间内,浮动元素是所有Web布局方案的基础(很大程度依赖于clear属性)。但浮动并不是为布局而生的,与使用表格布局基本一样,把浮动做为布局工具算是无奈之举,那时别无他选。
见以下场景,用标准流可以很方便地实现以下效果吗:
- 如何让多个块级盒子水平排列成一行
- 如何实现一个盒子中的两个盒子分别左右对齐
答案是不能,有很多的布局效果,标准流没法完成,此时就可以利用浮动布局。因为浮动可以改变元素标签默认的排列方式
利用浮动布局时,常常需要搭配以下准则:
- 多个块级元素 纵向 排列就用标准流
- 多个块级元素 横向 排列就用浮动
2.浮动语法及特性
float属性用于创建浮动框,将目标移动到一边,直到左边缘或右边缘触及包含块或者 另外一个浮动框的边缘。
语法:
选择器 {float:属性值;}
重点的属性值有:
none ———— 元素不浮动(默认)
left ———— 元素向左浮动
right ————元素向右浮动
加了浮动之后的元素,会具有很多特性,需要我们掌握的:
👇👇👇👇👇👇
1.浮动元素会脱离标准流(俗称 脱标):
a.脱离标准流的控制(浮),移动到指定位置(动)
b.浮动的盒子不再保留原先的位置
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
在我给这个box1盒子加了浮动之后,他就脱离了标准流的控制 浮了起来,
那么原先的位置不保留,此时如果有别的标准流的盒子(浮动的盒子
只影响浮动盒子后面的标准流,不会影响前面的标准流),那么这个位置
就会被别的标准流的盒子占领。(举例:就像我在排队时,我突然飞到天上了
那我原本的位置,是不是被后面的人接上了😄)
👇👇👇👇👇👇
2. 浮动的元素会一行内显示,并且顶部对齐
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
div {
width: 200px;
height: 200px;
background-color: pink;
float: left;
/*
当我给四个盒子设置浮动属性,他们就会在一行内显示 且 互相紧靠在一起不会有缝隙
(除非一行不够放,会自动换行)并且顶部对齐 */
}
.two {
width: 300px;
height: 400px;
background-color: skyblue;
}
.four {
background-color: tomato;
}
👇👇👇👇👇👇
3. 浮动的元素会具有行内块元素的特性
<span>1</span>
<span>2</span>
<div>divdivdiv</div>
<p>ppppp</p>
span,
div {
width: 200px;
height: 200px;
background-color: pink;
/* 原本呢,span属于行内元素,直接设置宽高是不起效的,如果这时候,我给span
设置了浮动,那么span就会具有行内块元素的特点 */
float: left;
/* 如果行内元素有了浮动,则不需要转换成块/行内块就可以直接给宽高 */
}
/*
任何元素都可以浮动,不管原先是什么模式的元素,只要添加了浮动后,就会具有
和行内块元素相似的特性 */
p {
height: 300px;
background-color: skyblue;
/* 在不添加浮动时,p属于标准流,且宽度和父亲一样宽 */
float: right;
/*
当我给p这个块级盒子添加了浮动,他就有了行内块元素的特性,在具有height为300
的基础上,他的宽与内容一样宽
注意!!之所以没和左边的盒子对齐,是因为p默认有一个margin为16px的外边距
*/
}
3.注意事项
浮动和标准流父盒子搭配:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
一个元素动了,理论上其余兄弟元素也要浮动(要遵循的原则)
比如一个盒子里面有多个盒子,如果其中一个盒子动了,那么其他的盒子也应该
浮动,以免出现问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
4.清除浮动
为什么要清除浮动?
-
理想中的状态是:让子盒子撑开父亲,有多少盒子,我父盒子就有多高
-
我不给标准流的父盒子设置宽高
假设我父盒子里面的子盒子全部添加了浮动,那么这时候,本来不添加宽高的父盒子的高
是与内容一样的,但是添加了浮动的盒子是不占位置的,所以哪怕这些子盒子
有很多,但他们都不会撑开父盒子,父盒子的高度为0 -
由于父盒子很多情况下,不方便给宽高,但是子盒子浮动又不占有位置,最后父盒子
高度为0时,就会影响下面的标准流盒子
就是因为浮动元素不再占用原文档标准流的位置,对后面的元素排版产生影响
清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度,则不需要清除浮动
- 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度,就不会影响下面的标准流了
语法
选择器 {clear:属性值}
值:
left —————— 不允许左侧有浮动(清除左侧浮动的影响)
right —————— 不允许右侧有浮动 (清除右侧浮动的影响)
both —————— 同时清除左右两侧浮动的影响
一般只用 clear:both
清除浮动的策略是:闭合浮动(意思就是只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子)
当然,只要没影响到后面的布局,也可以不清除浮动的!
清除浮动的方式1
额外标签法,也称隔墙法,是w3c推荐做法。虽然是推荐做法,但是不常用!
额外标签法会在最后一个浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>
或者其他标签(如<br>
等)
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<!--
额外标签法:
注意!!!额外标签法新添加在最后一个浮动元素末尾的标签
必需是块级元素
比如换成 <span class="clear"></span> 就不会清除浮动了 -->
<div class="clear"></div>
<!--
或者 <br class="clear">
优点:通俗易懂,书写方便
缺点:添加许多无意义标签,结构化较差 -->
</div>
<div class="footer"></div>
.box {
width: 900px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 300px;
background-color: black;
}
.clear {
clear: both;
}
清除浮动方式2
可以给父级添加overflow属性,将其属性设置为hidden、auto、scroll
注意!是给父元素添加代码
优点: 代码简洁!
缺点: 无法显示溢出的部分!
就比如一个子盒子漏出了半边在父盒子外,这时候会被切掉, 因为清除了浮动,所以能出父盒子的不是标准流不是浮动,是定位
清除浮动方式3
::after伪元素法
::after方式是额外标签法的升级版。也是给父元素添加!
伪元素的写法是两个冒号,::after,写一个是为了照顾低版本浏览器
高版本浏览器会自动把一个冒号渲染成两个
当我给父标签添加这个after这个伪元素之后,他会在盒子的最后面
新增一个盒子,只不过这个盒子是行内元素,所以要转换成块元素(就像额外标签法)
之所以说是额外标签法的升级版,是因为这样做就不用再去增加一个标签了。
这个标签是通过CSS生成的,虽然样式更多,但结构更清晰
(只要结构里没有额外增加标签,这个代码就是最优的)
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
有一些代表性网站也是这么清除浮动的:百度淘宝网易
清除浮动方式4
双伪元素清除浮动:
刚刚的after伪元素是在最后面生成一个盒子,现在before也是一样在最前面生成一个盒子
写法:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
/* 模式转换为表格*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:代码更简洁
缺点:还是需要照顾低版本浏览器
代表网站:小米、腾讯也是这么清除浮动的
以上就是我对浮动的简述,感谢阅读~