css float属性总结中的缺陷以BFC

terry 2年前 (2023-09-27) 阅读数 102 #数据结构与算法

1结束。 Float简介

CSS世界中的float属性是一个非常古老的属性。设置了float属性的元素会根据设置的属性值向左或向左移动。向右浮动，直到其外边缘接触到包含框或另一个浮动框的边缘。设置了float属性的元素将会脱离常规文档流，相当于不占用空间。因此，文档常规流中的元素的行为就像浮动元素不存在一样。因此，设置float属性会影响我们的页面布局。具体来说：让块元素忽略浮动元素，让内联元素像流水一样包围浮动元素，实现流动布局。

float属性：的设计初衷很简单，就是让文字像流水一样围绕在浮动元素周围，如下图：

2。 float

有哪些有趣的特点呢？具体如下：

包裹
高塌
阻塞
无边距合并

下面将详细阐述这些点的含义。

2.1 包裹

所谓“包裹”，其实是由“包裹”和“自适应”两部分组成。假设您有以下 CSS 代码：

/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1) wrap。在这个例子中，浮动元素的父元素的宽度设置为200px，浮动元素的子元素是宽度为128px的图像。此时，浮动元素的宽度表现为“换行”，即内部图像的宽度为128px。

/* HTML代码 */
<div class="father">
    <div class="son">
        <img >
    </div>
</div>

2）适应。给浮动子元素添加一些文字：

/* HTML代码 */
<div class="father">
    <div class="son">
        <img >
        <span style="font-size: 12px">美女1，美女2，美女3，美女4，美女5，美女6，后宫1，后宫2，后宫3，后宫</span>
    </div>
</div>

此时，浮动元素的宽度调整为父元素的200px宽度，最终的宽度也是200px。如下图所示：

2.2 高度塌陷

float属性有一个著名的功能：会导致父元素的高度塌陷。如2.1章渲染图所示，父元素div的高度没有被子元素拉伸（粉色区域）。这种效果可以称为“高度塌陷”。高度塌陷的原因是浮动元素脱离了正常的文档流，而div.father认为它没有子元素，所以发生了高度塌陷。下面的文章将介绍如何解决高塌陷问题。

2.3 块式

块式是指当元素的float属性为none时，其显示计算值为block或table。例如：

/* JavaScript代码 */
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = 'left'
console.log('2.' + window.getComputedStyle(span).display)

控制台中的结果如下：

1.inline
2.block

不知道你是否有和我一样的疑问：既然设置了float后元素就被遮挡了，怎么还能产生包裹效果呢？？要回答这个问题，我们需要重新定义block的含义。这里的块是指可以设置宽度和高度的块元素，并不是真正的块元素。

因此，不需要以下样式组合：

span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

2,4 无边距重叠

这里我们将 .son 类添加到 1♿x：样式，在浏览器中查看实际效果。

/* HTML 代码 */
<div class="father">
    <div class="son">
        <img >
    </div>
    <div class="son">
        <img >
    </div>
    <div class="son">
        <img >
    </div>
</div>

我们将类.son的边距增加到10px。检查浏览器中相邻.son元素的空白区域高度为20px。你可能会发现float属性被设置了。元素没有边距重叠，这与常规元素的边距重叠不同。

3。浮动与浮动布局

使用浮动可以通过打破正常的文档流来实现CSS换行，但会导致“高度塌陷”问题！不过，我们可以利用浮动属性来打乱正常的文档流程，实现一些常用的布局：

文本换行变换 - 中间内容居中、左中、右布局

看直接举例：

<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

从下图中可以看出，实现了左中右布局，中间内容居中。

源自文字换行 - 一侧固定

<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 环绕和自适应的区别所在 */
    margin-left: 70px;
}

与文字换行效果相比，不同的是.girl多了一个p。 0.p。图像宽度设置为 60px，这样就不会出现文本换行效果。这里我们也可以使用 margin-left 来代替，使用 border-left 或 padding-left

来改变内容的大小。自适应布局效果。 4。 float的敌人既然使用float属性会带来很多问题，那么有没有办法消除这些问题呢？答案是：肯定是的。请继续阅读下文。？左侧不允许有漂浮物；
右：右侧不允许有漂浮物；
both：两侧均不允许有漂浮物。

如果从字面上理解的话，clear:left应该是“clear left swing ”， ❓清除右侧浮动》，其实这个说法是有问题的，因为浮动还在，并没有被清除！只能去除浮动的影响。

官方解释对于clear属性来说是：“元素框的边缘不能与前一个浮动元素相邻”。注意这里的“前面”三个字，即clear属性不关心“后面”浮动元素，clear属性只能清除元素本身，不能影响其他元素。那么看下面的例子：

/* HTML代码 */
<div class="box1"></div>
<div class="box2"></div>

/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

如上图所示，box1元素被设置为向左浮动，并且有与正常的文档流程分离，这样box2就可以出现在box1的底层。如果你想让box2换行，只需在.box2中添加clear:left样式即可类如下图所示：

`4.2clear属性的缺点`

clear属性只对块级元素有效，但::after等伪元素默认是内联级元素。因此，在实际工作中，我们经常使用如下代码来去除浮动的影响：

.clear::after{
    content: "";
    display: table;/*也可以是'block'或者是'list-item'*/
    clear: both;
}

因为clear:both的本质就是防止自己与显示在同一行浮动元素，它并没有真正意义上清除浮动，所以浮动元素有。一些不好的特性仍然存在，如：

如果clear:both元素之前的元素是浮动元素，则设置margin-top无效； /* HTML代码 */ <div class="box1"></div> <div class="box2"></div>

/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在此示例中，box2

中的设置Margin-top没有效果，如下图所示：

/* HTML代码 */
<div class="box1"></div>
<div class="box2"></div>

/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

S：清洁❿♝❿♝仍然可以进行文本换行。

<div class="father">
    <div class="float">
        <img >
    </div>
    <p>美女1，美女2，美女3，美女4，美女5，美女6，后宫1，后宫2，后宫3，后宫</p>
</div>
<div>我要美女1，我还要美女2</div>

/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: '';
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

本例中设置clean:both可以防止后续元素出现浮动效果，但最终的错位效果还是会出现（可以将.father的字体大小设置为0），然后设置 p-tag 的字体大小解决了错误的问题）。

可以清楚地看到：两者都只能在一定程度上消除液体元素的影响。如果想要完美去除液体元素的影响，就需要使用其他手段——BFC，见下文。

`5。 CSS世界的前沿——BFC`

`5.1 BFC`

的定义 BFC全称块格式化上下文，中文是“”块级格式化表现。 BFC的原理是：如果一个元素具有BFC，那么无论其内部子元素发生多大变化，都不会影响到外部元素。因此，BFC 元素不可能重叠边距。此外，BFC元件还可用于去除液体的影响。

那么要拥有BFC必须满足什么条件呢？只要满足以下条件之一就会触发 BFC：

html 根元素；
float 的值不为 null，
overflow 值是自动、滚动或隐藏，
screen 的值是 table- 任何单元格、表格文本和内联块，
position 的值不是相对的或静止的;

触发BFC后，无需使用clear:both属性清除浮动效果。，显示了边距重叠的效果。如下图所示：

使用BFC消除边距重叠。记住：只有当元素在同一个BFC中时，垂直方向的边距才会是clollpase。如果它们属于不同的 BFC，则不会出现边距重叠。因此，我们可能会创建另一个 BFC 来防止边距重叠。所以要让它们的边距为20px，我们只需要使用div制作一个BFC，并将p元素制作在不同的BFC中即可。请看示例：

/* HTML 代码 */
<div class="parent">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
    <p>item 4</p>
</div>

如下图所示，使用 BFC 消除了边距重叠问题。

清除高度塌陷的问题

在上一章中，如果子元素设置了浮动属性，父元素就会出现高度塌陷的问题。这里我们可以使用BFC来消除高塌的问题。请看下面的例子：

/* HTML代码 */
<div style="border: 1px solid deeppink;width: 200px; overflow: hidden">
    <img  style="border: 1px solid blue; float: left">
</div>

如下图所示，设置overflow:hidden样式后生成了BFC。根据BFC性能规则，内部元素的样式不会影响外部元素的样式，因此不存在高度塌陷的问题。

自适应布局（防止文本换行） /* HTML代码 */
<div class="parent">
    <img >
    <p class="girl">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,</p>
</div>

/* CSS代码 */
.parent{
    border: 1px solid deeppink;
    width: 200px;
    font-size: 0;
}
.parent img{
    border: 1px solid blue;
    float: left;
}
.girl{
    /*overflow: hidden;*/
    font-size: 12px;
    background-color: #cdcdcd;
}

如果我们给.girl元素设置具有BFC特征的属性，如：❙我们可以实现更健壮、隐藏、更智能的自适应布局。这里的

.girl 元素沿着浮动边缘形成自己的封闭上下文，与浮动元素没有交集。

设置overflow:hidden后，常规元素会自动填充容器中除浮动元素之外的剩余空间，形成自适应效果。这种自适应布局与纯浮动布局相比：