浮动、清除浮动、BFC

2022-11-05 09:36:34

一. 浮动

1. 浮动的定义

使元素脱离文档流，按照向左或向右的方向移动，直到它的外边缘碰到包含它的框或另一个浮动框为止。

脱离文档流就是在页面中不占位置了。

左浮动右浮动此处就不再赘述了。

2. 看一下浮动的一些情况

(1). 只给第二个p浮动时，3不见了，他其实在2的下面，我给3一个宽一点的宽度。会发现3在2的下面。

(2). 给3一个浮动

他会没有什么变化，因为浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的

(3). 把外边框的div宽度变小，会导致无法容纳所有的浮动元素，

（4）卡住的情况

以换行的那个元素为基准，如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”。

(5) 浮动对文字的影响 ,浮动框只会占据自己的位置，使文字可以围绕浮动框显示

一--. 浮动后的特性

1. 块级元素可以横排显示

2. 行内元素可以设置宽高

3. 元素没有设置宽高时，宽度为内容撑开宽

4. 支持margin

5. 脱离文档流

6. 不支持margin：auto。。。（浮动、绝对定位、固定定位的盒子失效。相对定位有效，但是如果left值不为0，在水平方向上不会居中，因为偏差了一个left值。）

二. 清除浮动

为啥要清楚浮动呢

当不给外层div高度时：

会变成：

我们会发现子元素浮动会造成父级盒子高度坍塌，这样如果下面在进行继续布局的话会使页面布局错乱，(下图中黄色的盒子是nav下的div)如果想要继续布局就要清除浮动了，这里我介绍几种清除浮动的方法。

清除浮动的方法

1. 父级的紧邻兄弟

给nav一个.nav{clear:both}

缺点：只是让后面的元素正常显示，并没有撑开box的高度

2. 父级给高度

box给高度

缺点：一般都是元素内容撑开高度，拓展性不好

3. 父级元素 display：inline-block；

缺点：父级盒子margin：auto；失效，上部分和下面黄色中间有间隙，换行，导致了这个间隔的出现(原因：https://blog.csdn.net/qq_40154925/article/details/77964507)。

4. 父级：overflow：hidden；

优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

5. 子元素：给浮动元素的末尾加一个元素，加上clear：both；

原理：这个空的div能让父级获取到高度，是因为设置之后这个div的左右都不能有浮动元素，所以这个空的div元素会向下移动，直到换行，而为了让这个div能够换行，父元素至少要包含浮动元素的高度才能提高足够的空间，这样实现清除浮动的影响。

缺点：随意添加一个空元素，不符合代码规范。

6. 当今最主流的清除浮动的方法：after伪元素清除浮动,添加给box。

clearfix:after{content:””; display:block; clear:both;}

兼容问题，ie6,ie7中要加上zoom。
```
.clearfix{zoom:1}
```
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码

clearfix:after{

content:"";//设置内容为空

height:0;//高度为0

lineheight:

0;//行高为0

display:block;//将文本转为块级元素

visibility:hidden;//将元素隐藏

clear:both//清除浮动

}

.clearfix{

zoom:1;为了兼容IE

}

三. BFC

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

1. BFC特性：

(1) .内部的块级元素会在垂直方向，一个接一个地放置

每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；

(3) .计算BFC的高度时，浮动元素也参与计算

(4). BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；

(5)、BFC会阻止外边距叠加：一般情况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。如果这两个相邻的块框不属于同一个BFC就不会叠加！
(6)、一个BFC的边框不能和它里面的元素的margin重叠。这意味着浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。当给一个挨着浮动的BFC添加负得外边距不会起作用。

2. 触发条件：

float除了none以外的值
overflow除了visible之外的值
display(table-cell / table-caption / inline-block / flex / inline-flex)
position(absolute,fixed)

3. 为什么"overflow:hidden"能清除浮动的影响。

overflow 属性规定当内容溢出元素框时发生的事情，

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

BFC可以包含浮动这一特性来清除浮动

当给.parent设置"overflow:hidden"时，实际上创建了一个超级属性BFC，此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

除了给.parent设置"overflow:hidden"，我们还可以设置"display:inline-block"、"position:absolute"、"float:left"等方式来创建一个BFC，从而达到包裹浮动子元素的效果（具体使用哪种方法要看项目需求）：

// css

.parent{

  /* 具体使用哪个要看界面设计的情况 */

  /* overflow: hidden; */

  /* display:inline-block; */

  /* position:absolute; */

  float:left;

}

码农公寓

相关文章