大家好,我是一个浮动元素,我在CSS王国中是一个很重要的角色,也许你们现在在工作中很少见到我的身影,因为我的flex兄弟和position定位兄弟在大部分情况下可以取代我,但是我还是想详细的介绍一下我自己,毕竟我曾经也是一个在前端开发中随处可见的明星人物。
为啥会有浮动元素的出现?
很久很久以前,网页排版中需要一种文字环绕的效果,于是我就被创造出来了,用来实现下面这样的效果👇,文字环绕着一个浮动的元素
而且使用我也很简单,只需要设置一个float: left或者right就可以了,代码如下:
后来很多聪明的前端工程师开始使用我来制作多列布局,比如下面这种
浮动元素的特点
上面讲了我出现的原因是用来做文字环绕,以及后面被前端工程师拿去做多栏布局,那么我到底有哪些特点呢?接下来我就好好聊聊👇
首先第一点呢,前面说了,我作为一个浮动元素会导致我后面的文字环绕在我周围,示例代码如下:
<div class="float1">
浮动元素
</div>
<div>
让浮动效果可视化
我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
让浮动效果可视化
我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
让浮动效果可视化
我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
让浮动效果可视化
我们可以在浮动元素上应用 margin,将文字推开,但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流,紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改,来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类,然后在你的 CSS 文件中添加如下规则,它会赋予跟随其后的段落一个背景色。
</div>
.float1 {
height: 100px;
width: 100px;
background-color: #69c0ff;
float: left;
}
然后第二点呢,我作为浮动元素,我会脱离正常的文档流
比如说下面这个效果,蓝色的元素浮动到左边之后脱离了文档流,就导致红色的正常元素从它底下插了上来,这样就会造成一个问题,有时候前端工程师并不希望我浮动之后影响到我后面的元素,后面我会告诉大家如何解决这个问题
示例代码如下:
<div class="float2">
float2
</div>
<div class="normal">
正常的元素
</div>
.float2 {
height: 100px;
width: 100px;
background-color: #69c0ff;
float: left;
opacity: 0.8;
}
.normal {
height: 200px;
background-color: #ff7875;
}
最后第三点呢,我会造成父元素的高度塌陷,比如下面这个例子👇
我浮动之后,我的父容器缩成了一根线,这就是父容器高度塌陷的问题
示例代码如下:
<div class="wrapper">
<div class="float3">
浮动
</div>
</div>
.wrapper {
border: 1px solid;
}
.float3 {
height: 200px;
width: 200px;
background-color: #69c0ff;
float: left;
clear: left;
opacity: 0.8;
}
解决浮动元素带来的问题
前面说了我作为一个浮动元素,会导致我后面的元素位置发生变化以及父元素高度塌陷的问题,下面我就讲讲如何解决这两个问题👇
首先,解决我后面的元素位置发生变化的问题,解决办法是可以给我后面出现的元素设置 { clear: left; },clear属性的意思是清除某个方向的浮动元素对我的影响,比如{ clear: left; }的意思就是清除左边浮动元素对我的影响,{ clear: both; }的意思就是清除左右两边的浮动元素对我的影响
比如下面这个例子,我后面的元素就没有被我的浮动所影响😸
示例代码:
<div class="wrapper">
<div class="float3">
浮动
</div>
<div class="item1">
正常元素,设置了{ clear: left; }
</div>
<div class="item2">
正常元素
</div>
</div>
.wrapper {
border: 1px solid;
}
.float3 {
height: 200px;
width: 200px;
background-color: #69c0ff;
float: left;
clear: left;
opacity: 0.8;
}
.item1 {
height: 80px;
background-color: #ff9c6e;
clear: left;
}
.item2 {
height: 80px;
background-color: #ffc069;
}
.item3 {
height: 200px;
background-color: #d3f261;
}
然后再解决父元素高度塌陷的问题,当父容器元素里面只有1个浮动元素的时候,就无法使用上面这种clear的办法了,所以得想别的办法了
废话不多说,讲两个常见的办法:
- 设置父容器元素{ overflow: hidden; }
这个办法其实本质就是触发BFC,触发BFC后父元素的高度就会包含其中的浮动元素,至于什么是BFC我后面会继续写笔记聊到
- 给父容器加一个伪元素:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
这个办法的本质其实就是创造一个父容器内处于最后的子元素,并且让它设置为{ clear: both },这样子就清除了浮动元素的影响,父元素高度就不会塌陷了
总结
我曾经是一种很好用的特性,但是现在却很少看到我,希望大家可以更多的了解我