元素环绕 CSS（一）float与BFC

时间：2024-02-19 04:02:06 来源：网络整理浏览：0

本文参考资料：

前端精选摘要：BFC CSS 2.1块神奇背后的原理-

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

漂浮

① 浮动设计初衷：文字环绕效果

// Pug
div.text-around
  img(src="../../assets/timg.jpg")
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
  p 文字环绕效果
// Sass
.text-around
  img
    float: left
    width: 70px

图1：文字环绕效果

②浮子的特点

特点1：设置为float的元素不参与高度计算。

特征2：设置为浮动的元素将具有环绕特性。

特点3：设置为浮动的元素会自动变成块元素。

我们先看功能一：

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

预告一下，这个奇怪的现象和BFC有关。具体原因将在下面关于BFC进行讨论。

图 2：折叠的父元素高度

图 3：根元素 (html) 具有高度

我们来看一下特点二：

如果我们看一下图2中的T-DIV，我们可以看到它的宽度非常大（事实上，它的宽度是父元素的100%），但它的高度只是ap标签的高度。

接下来我们修改示例代码：

//Pug
div.text-around
  img(src="../../assets/timg.jpg")
  p 文字环绕效果文字环绕效果
//Sass
.text-around
  float: left
  img
    float: left
    width: 100px

图 4：包裹

T-DIV添加了float属性后，乍一看，div的宽度缩小了，而且图片也参与了高度的计算。

我们再仔细分析一下：

我们先看宽度。 ‘文字环绕效果’十二个字符的宽度为192px，图片的宽度为100px。 text-div最终的收缩宽度为192px元素环绕，这意味着收缩宽度取决于内部元素的最大宽度。看高度，T-DIV的高度和图片的高度是一样的。可以看到，即使设置了float属性，图片也会参与T-DIV的高度计算（其实这也是BFC的一个特性，下面会详细介绍）。文字环绕效果，图片的浮动触发了文字环绕效果，但由于T-DIV的宽度已经确定，所以文字并不是排成一行，而是分成几行。

③ 清除浮子

为什么要清除浮动？

浮动的第一个特性决定了它会导致父元素高度塌陷，也就是图2所示的情况。清除浮动实际上就是清除浮动造成的父元素高度塌陷的影响。

如何清除浮动？

方法一：使用clear:both

clear属性的值可以是left、right、both等。浮动元素不能出现在设置了该属性的元素的左侧或右侧。如果其左侧或右侧有浮动元素，则该元素将定位在浮动元素的下方，以确保其左侧或右侧没有浮动元素。

（1）使用伪类：after：

, , 这三个属性是为了保证伪类不显示任何东西，而设置为block则是让它的宽度占满一行，这样浮动元素就可以在它的范围内，clear属性就可以起作用。

.text-around
  &:after
    content: ''
    display: block
    clear: both
    height: 0
    overflow: hidden
  img
    float: left
    width: 70px

(2)添加新的div

// Pug
div.text-around
  img(src="../../assets/timg.jpg")
  p 文字环绕效果文字环绕效果
  div.fix
 // Sass
.text-around
  .fix
    clear: both
  img
    float: left
    width: 70px

方法二：父元素触发BFC

为什么BFC可以清除浮动，后面会讲到。

BFC（区块）

①什么是BFC？

简单来说，BFC是一个容器，这个容器中的块级元素会遵循一系列的规则。

② 如何触发BFC

根元素的float属性()不是或-block,table-cell,table-,flex,-not

③ BFC中块级元素遵循的规则

块级元素从顶部开始一个接一个地垂直排列。块级元素的垂直距离由下式确定，属于同一BFC的两个相邻块级元素将会重叠。每个块级元素的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使存在浮动，也会发生这种情况

关于第二点，可以想到解决边距重叠的办法：两个块元素之一触发BFC的生成（这样两个块元素不属于同一个BFC，所以触发第二个的条件点没有达到。）

对于第三点，首先提出包含块的概念。众所周知，一个完整的box包含-box、-box、-box、-box，但包含块只能是-box或-box。

如果块级元素是固定的。嗯，包含块始终是。如果是块级元素。那么，包含块是最近的非祖先元素的-box。如果块级元素是or。那么，包含块就是它的父元素的-box。

第三点也是文字环绕效果的实现原理。我们先看一个例子：

 // Pug
div.text-around
  img(src="../../assets/timg.jpg")
  p 文字环绕效果文字环绕效果文字环绕效果
// Sass
.text-around
  width: 110px
  img
    float: left
    width: 70px
  p
    background-color: cornflowerblue