从元素到BFC，看完这篇你还不会用浮动？

浮动（Float）

写在前面

最初，引入float属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。例如：

随着网页布局方式的不断发展，现在有更多现代化的布局方式，比如Flexbox和Grid布局。它们更加灵活和强大，也更适合现代网页的设计和开发。所以，尽管浮动布局还有它的用处，但现在越来越多的开发者选择使用更现代的布局方式来构建网页。

那么作为一名前端开发者，对浮动的学习还是很有必要的，所以小编搜集了各方资料，最终写出了这篇文章，如果对你有帮助，请给个小红心支持一下吧！

在对float分析之前，我先来讲讲什么是块级元素、行内元素以及行内块元素。

块级、行内以及行内块

在CSS中，元素可以分为三种基本类型：块级元素、行内元素和行内块元素。它们在页面中的显示方式和特性有所不同。下面我们分别来聊聊，以便对浮动了解得更为透彻。

1. 块级元素（Block Elements）：

div{
    width: 100px;
    height: 100px;
}
.item1{
    background-color: #f1f755;
}
.item2{
    background-color: #38c7f7;
}
.item3{
    background-color: #62fab0;
}

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

根据上述例子，div标签为一个块级元素，我们归纳出以下结论：

默认占据一整行： 块级元素通常会在页面上显示为独立的一块，占据整个可用宽度，因此它们会自动换行，每个块级元素都从新的一行开始，并且在前后都会有一定的间距。

可以设置宽高： 块级元素可以通过CSS设置宽度（width）和高度（height）属性，从而控制它们的尺寸。

常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li> 等。

2. 行内元素（Inline Elements）：

div{
    width: 100px;
    height: 100px;
    display: inline;
}

我们继续引用上述例子，不过在div样式中添加了一行display: inline，这样就可以将当前元素转化为行内元素。

我们用运行后发现浏览器上啥都没有，打开控制台，将鼠标放置在各item上发现他们的宽高都为0，所以我们得出：

默认不换行： 行内元素通常只占据它实际内容的宽度，不会强制换行，多个行内元素会在同一行上水平排列。

不可以设置宽高： 行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。

常见的行内元素包括 <span>、<a>、<strong>、<em>、<img> 等。

3. 行内块元素（Inline-Block Elements）：

div{
    width: 100px;
    height: 100px;
    display: inline-block;
}

我们还是引用上述例子，不过在div样式中添加了一行display: inline-block，这样就可以将当前元素转化为行内块元素。

这里我们发现色块之间有间距，这是由于浏览器将我们的换行当做一个有大小字符，然后就会有间距的效果，我们可以直接将三个div放在同一行，或者在全局添加一个font-size:0这个样式就可以避免：

最后我们得出行内块的特点：

可以同行显示： 可以在同一行内水平排列。

可以设置宽高： 元素可以设置宽度和高度。

默认不换行： 元素默认不会强制换行。

常见的行内块元素包括 <input>、<button>、<textarea> 和通过CSS设置display: inline-block;的元素。

讲完这三个元素，我们来聊今天的主角------------浮动。

浮动的基本特性

float常用的属性值：

属性值	效果
left	向左浮动
right	向右浮动
none	不浮动
inherit	继承父元素浮动的属性

为了大家理解透彻我继续用上面的例子来解释，我们回到最开始的块级样式，先只给item1加上左浮动属性。

.item1{
    background-color: #f1f755;
    float: left; 
}

然后又只给item2加上左浮动

前后对比，当item1浮动时，我们发现item1的位置没变，item2、item3上移，item2被item1覆盖了；当item2浮动时，item3被item2覆盖，于是我们可以这样理解：谁浮动，谁就在原地被拎起来，然后后面的元素依次上移。是这样吗，我们接着看：

于是我们给item1和item2都加上左浮动：

为什么item2跑到上面去了？item1和item2为什么不重合？

原因是浮动元素会脱离文档流，其他盒子会无视这个元素，如果浮动元素后面紧邻的是普通块级元素，浮动元素就会和文档流发生重叠，但是后面接的同样是浮动元素，那么后面的浮动元素会并排紧跟在前一个浮动元素后方。如上面所示，item2同行排布在item1后方。

那么在行内元素中呢？

前文我们提到行内元素不可以设置宽高，但是当我们给三个item都设置左浮动时，消失的元素又重新出现，这是因为浮动让行内元素重新获得了宽高。

所以我们可以得出，float的作用。

float的主要作用：

1. 文字环绕： 文字内容可以环绕浮动元素。
2. 脱离文档流： 浮动的元素不再占据文档的空间，可以自由移动到容器的左右两侧。
3. 同行显示： 浮动元素可以并排显示，而不是默认的堆叠排列。
4. 设置宽高： 浮动元素可以设置宽度和高度。
5. 居中： 不能用margin:0 auto居中

浮动导致元素已不在普通文件流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框不会自动撑高来包裹浮动元素，即所谓的"高度塌陷"。如下图所示

.container{
    border: 2px solid black;
    width: 90%;
}
.floating{
    height: 100px;
    background: #f78989;
    width: 200px;
    float: left;
}

<div class="container">
    <div class="floating"><h1>float left</h1></div>
</div>

所以才有了以下方法来清除浮动：

清除浮动的方法

<div class="container">
    <ul class="clear">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="text">under</div>
</div>

*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
    width: 200px;
    height: 100px;
    float: left;
}
li:nth-child(1){/*nth-child(1)表示第一个li标签*/
    background: #ef4949;
}
li:nth-child(2){
    background: #ffff5f;
}
li:nth-child(3){
    background: #59ffde;
}
.text{
    width: 100px;
    height: 150px;
    background-color: #0092b3;
}

上图就是一个浮动导致的问题，设计师是想under蓝色块在其他三个色块的下方，但是这三个色块都设置了左浮动，导致under色块上移，为了解决这个问题，我们开始清除浮动。

1. 给父容器设置固定高度（不推荐）

我们直接给父容器ul添加100px高度，能达到想要的效果。

ul{
    height:100px;
}

这种方法是最简单粗暴的，但是不推荐，因为固定高度不利于页面的响应式设计，而且当内容超出容器高度时会产生溢出问题。

2. 在浮动元素后添加新元素并清除浮动

我们在li标签后添加一个div标签，并给它添加一个clear:left属性来清除左浮动

.clear{
    clear: left;/*清除左浮动*/
}

<ul class="clear">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div class="clear"></div>
</ul>

这种方法通过在浮动元素后添加一个空的块级元素，使用clear:left或clear: both清除浮动，使得父容器能够自适应浮动元素的高度。

3. 在容器的伪元素上应用清除浮动

给容器添加伪元素，在伪元素上添加清除浮动操作。

ul::after{
    content: '';
    clear: both;
    display: block;
}

这种方法与第二种类似，不过将清除浮动的样式应用在容器的伪元素上。

4. 在下方被浮动元素影响的容器上应用清除浮动（不建议）

在浮动元素影响的容器中，应用清除属性，从而清除浮动。

.text{
    width: 100px;
    height: 150px;
    background-color: #0092b3;
    clear: both;
}

这种方法不推荐，因为不合常理，自己闯的祸还要让后者来收拾，并且不易于团队维护。

5.BFC清除浮动（重要）

将容器设置为BFC容器，就浮动效果覆盖

ul{
    display: flex;

BFC容器( Block Formatting Context )块级格式化上下文

在BFC中，块级元素会在垂直方向上一个接一个地放置，它们不会重叠。BFC内部的元素会按照一定规则进行定位，不会影响到外部元素的布局。这样，BFC可以帮助我们控制页面元素的布局，避免一些意外的效果。

• BFC的特点：

1. BFC容器在浏览器计算高度时，会将浮动元素的高度也计算在内
2. 解决内外margin重叠问题

• 以下是常用的BFC容器：

1. float:left || right
2. position:absolute || fixed
3. display:inline-block
4. display:table-cell......表格布局
5. overflow:hidden || auto || overly || scroll
6. 弹性盒子 (display:flex || inline-flex)

结语

浮动（Float）是一种强大的布局工具，但是在使用时需要小心处理浮动元素带来的影响，特别是容器高度塌陷的问题。通过以上介绍的几种清除浮动的方法，我们可以灵活应对不同的布局需求，确保页面布局的稳定性和可靠性，在实际开发中，BFC的应用尤为广泛，希望本篇文章能对你有帮助！

相关参考

我的Gitee： CodeSpace (gitee.com)

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞 收藏+关注" ，感谢支持！！