CSS面试：浮动、BFC（布局概念）浮动（float）是CSS中用于将元素从文档的正常流中移除，并将其放置在页面的左侧或

浮动（float）是CSS中用于将元素从文档的正常流中移除，并将其放置在页面的左侧或右侧的布局技术。浮动元素通常会使得后续的内容环绕在它的旁边，形成类似于文字环绕图片的效果。

`float` 属性的值

float: left; ：元素浮动到容器的左侧。
float: right; ：元素浮动到容器的右侧。
float: none; ：元素不浮动，保持在文档的正常流中。这是默认值。
float: inherit; ：元素继承其父元素的浮动值。

浮动的使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="box left">左浮动</div>
    <div class="box right">右浮动</div>
    <p>这是环绕在浮动元素周围的文本内容。无论左侧还是右侧的浮动元素，后续的非浮动元素（例如这个段落）都会被文本包围。</p>
</body>
</html>

在上面的例子中，.left 类使第一个盒子浮动到左侧，而 .right 类使第二个盒子浮动到右侧，段落文本会围绕着浮动的盒子。

浮动带来的问题

父元素高度塌陷：当子元素使用了 float 属性时，它们会从正常的文档流中脱离出来。这意味着父元素无法感知到浮动元素的存在，因此不会自动调整自己的高度以包含这些浮动的子元素。这就导致了所谓的“高度塌陷”问题，表现为父元素高度为0，看起来好像没有包含任何子元素。
影响后续元素的布局：浮动的元素会影响其后面的元素布局，可能导致意想不到的效果。

解决浮动带来的问题

1. 清除浮动

清除浮动是指在浮动元素之后添加一个清除浮动的元素，使后续元素不再受浮动元素的影响。

clear 属性：使用 clear 属性清除浮动，可以设置为 left、right 或 both。

<div style="clear: both;"></div>

使用 clearfix 类：伪元素

.clearfix::after {
    content: "";
    display: table;{/*伪元素设为块级元素，宽度自动扩展以匹配父元素的宽度*/}
    clear: both;
}

<div class="clearfix">
    <div class="box left">左浮动</div>
    <div class="box right">右浮动</div>
</div>
<p>后面的段落内容</p>

2. BFC（块格式化上下文）

创建块格式化上下文的元素（例如设置 overflow: hidden;）可以让父元素包裹住浮动元素，从而解决高度塌陷问题。

.container {
    overflow: hidden;
}

BFC是一种独立的渲染区域，它对区域内的元素进行布局，并且不会影响到区域外的元素。块格式化上下文有以下特性：

内部盒子会在垂直方向上一个接一个地排列。每个元素的顶边与相邻元素的底边相接触。
BFC容器会包含内部浮动的元素。换句话说，BFC的高度会扩展以包含其内部所有的子元素，包括浮动的子元素。

在CSS中，触发BFC的方式包括：

float 不为 none（即元素被浮动）。
position 设置为 absolute 或 fixed。
display 设置为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 等。
overflow 设置为 hidden、auto、scroll 或 overlay。

当你在父元素上设置 overflow: hidden; 时，浏览器会创建一个BFC，从而使这个父元素的布局变得独立。在这个独立的布局上下文中，父元素会根据其子元素的内容自动调整高度，即使这些子元素是浮动的。

具体运作机制

浮动元素的特性：浮动元素脱离文档的正常流（即它不会占据父元素的空间），导致父元素在常规情况下无法感知浮动元素的高度。
BFC的作用：当一个元素生成了BFC后，BFC内的所有元素都在BFC的控制范围内进行布局。BFC会尽力包裹住它包含的所有浮动子元素，因此父元素会根据这些浮动元素调整自己的高度。
overflow: hidden; 的效果：设置 overflow: hidden; 会创建BFC，强制父元素包含其内部的浮动元素，从而使父元素的高度不再塌陷。

浮动的应用场景

文字环绕图片：在文章中让文字环绕图片，这是浮动的经典应用。
布局设计：浮动元素可以用于实现两列或多列布局，虽然现在更常用的是Flexbox或Grid布局，但在早期，浮动是常用的布局方式。

小结

浮动是一种强大的布局工具，但需要小心处理因浮动引起的布局问题。现代Web开发中，虽然浮动不再是主要的布局手段，但在某些特定场景下（如文字环绕图片）仍然非常有用。

CSS面试：浮动、BFC（布局概念）

float 属性的值