latex 文字出现在float之前_CSS（一）float与BFC

最新推荐文章于 2021-04-19 16:53:42 发布

weixin_39793553

最新推荐文章于 2021-04-19 16:53:42 发布

阅读量205

点赞数

文章标签： latex 文字出现在float之前

此文的参考资料：

示例代码均使用Pug和Sass编写。

① float设计的初衷：文字环绕效果

//

图1：文字环绕效果

② float的特性

特性一：设置了float的元素不参与高度计算。

特性二：设置了float的元素会有包裹性的特点。

特性三：设置了float的元素会自动变成block元素。

我们先看特性一：

我们把上面代码中的p标签删剩一个。可以发现类名为text-around这个div（这个div下面简称为T-DIV）的高度只有一个p标签，即该图片不参与其父元素的高度计算。但是很奇怪的是该图片参与了根元素（<html>）的高度计算！

<坑1> 预告一下这个奇怪的现象跟BFC有关，具体原因下面BFC那一块再讲。

图2：父元素高度塌陷

图3：根元素（html）却有高度

再来看特性二：

我们看看图2中的T-DIV，可以发现其宽度很大（实际上其宽度为父元素的100%），但是高度只有一个p标签的高度。

接着我们修改一下实例代码：

//

图4：包裹性

T-DIV加了float属性后，一眼看去，该div宽度收缩了，而且此时图片也参与了高度的计算。

我们再仔细分析一下：

先看宽度，‘文字环绕效果文字环绕效果’十二个字的宽度为192px，图片的宽度为100px。而text-around这个div最终收缩的宽度为192px，由此可得收缩的宽度取决于内部元素的最大宽度。
再看高度，T-DIV的高度与图片高度相同，可见图片即使设置了float属性也会参与T-DIV的高度计算（<坑2> 其实这也是BFC的一个特性，下面会详细介绍）。
文字环绕效果，图片的float触发了文字环绕效果，但是由于T-DIV的宽度已经确定了，所以文字没有一行排开，而是分开了好几行。

③ 清除浮动

为什么要清除浮动？

浮动的特性一决定了其会导致父元素高度塌陷，即图2展示的情况。清除浮动其实就是清除浮动带来的父元素高度塌陷的影响。

怎么清除浮动？

方法一：使用clear: both

clear属性的值可以有left，right，both等等，设置了该属性的元素的左边或右边不能出现浮动元素。若其左边或者右边出现了浮动元素，该元素就会定位到浮动元素的下方，从而保证其左边或右边没有浮动元素。

（一）使用伪类:after：

content，height，overflow这三个属性是为了保证该伪类不会显示出任何东西，而将其设置为block是为了让其宽度占满一行，这样浮动元素才能在其范围内，clear属性才能起作用。