[干货]浮动+BFC 容器 Block Formatting Context 块级格式化上下文--小白必学

路修远i2023-10-31 18:09

前言

今天，我们直接上干货！！CSS必修课！--->浮动 + BFC块级格式化上下文

正文

什么是文档流？

文档流，从上往下，从左往右

文档流（document flow）是网页中用来排列和定位HTML元素的基本原则和机制。在文档流中，HTML元素按照其出现的顺序依次排列，每个元素所占据的空间（包括内容、内边距和边框）被计算在内，相邻元素之间没有空隙。当一个元素的大小或位置发生变化时，文档流会自动进行调整。

文档流的底层原理是基于盒模型和浮动定位。盒模型是指每个HTML元素都被看做是一个矩形盒子，包括元素的内容、内边距、边框和外边距。浮动定位是指元素可以浮动在文档流中，沿着文本方向或其他元素的边缘对齐。

文档流还受到CSS属性的影响，如display、position、float、clear等属性可以改变元素的默认文档流位置和尺寸。例如，设置position为absolute或fixed可以使元素脱离文档流，而使用float属性可以让元素浮动到文档流的左侧或右侧。

什么是块级，行内块，行内？

块级元素、行内块和行内元素是HTML元素分类的三种主要方式，它们各自具有不同的特点。

  1. 块级元素：块级元素在页面中独占一行或多行，可以对其单独设置高度、宽度以及对齐等属性。常见的块级元素有<h1>、<h6>、<p>、<div>、<ul>、<ol>、<li>等。块级元素的特点主要有以下几点：
  • 独占一行：块级元素会自动换行，每个块级元素都会独占一行，不与其他元素并排显示。
  • 默认宽度是父元素的100%：块级元素的默认宽度是其父元素的100%，可以通过设置宽度属性来改变其宽度。
  • 可以设置宽度、高度、内外边距等属性：由于块级元素独占一行，所以可以设置宽度、高度、内外边距等属性来调整元素的大小和间距。
  • 可以容纳其他块级元素和行内元素：块级元素可以包含其他块级元素和行内元素，可以用来构建页面的整体结构。
  1. 行内元素：行内元素不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度、高度以及对齐等属性。常见的行内元素有<a>、<strong>、<b>、<em>、<del>、<span>等。行内元素的特点主要有以下几点：
  • 不独占一行：行内元素不会自动换行，会根据内容的大小自动调整宽度，可以与其他元素并排显示。
  • 默认宽度是内容宽度：行内元素的默认宽度是其内容的宽度，无法设置宽度属性来改变其宽度。
  • 可以设置高度、行高、内外边距等属性：行内元素可以设置高度、行高、内外边距等属性，但对宽度属性无效。
  • 可以容纳其他行内元素：行内元素可以包含其他行内元素，但不能容纳块级元素。
  1. 行内块（inline-block）：行内块是一种同时具有块级元素和行内元素特性的特殊类型元素。它像块级元素一样独占一行，同时也可以像行内元素一样并排显示。常见的行内块包括<img>和<input>等。行内块的特点如下：
  • 独占一行：行内块会独占一行，不与其他元素并排显示。
  • 可以设置宽度和高度：行内块可以设置宽度和高度属性，这与块级元素相似。
  • 并排显示：与行内元素相似，行内块可以与其他行内块并排显示，不会自动换行。
  • 默认宽度是内容宽度：行内块的默认宽度是其内容的宽度，可以通过设置宽度属性来改变其宽度。

今天我们学习的内容，我就直接摘要总结：

css 复制代码 
块级
​
1.默认占据一整行
2.可以设置宽高
​
行内块 
​
1.可以同一行显示
2.可以设置宽高
3.空格换行会导致元素产生间隔,换行会被浏览器当成字体处理
​
行内 
​
1.可以同行显示
2.不可以设置宽高 span也是行内

这是今日我们学习要用到的主要内容！！

什么是浮动？今日主角之一！！

浮动：会让元素脱离文档流 和绝对定位相同，但是浮动只能左右浮动

水平方向：text-align非块级居中,margin：0 auto;控制块级水平居中

浮动元素不能margin : 0 auto;只能margin：0

浮动

1.会脱离文档流

2.文字环绕

3.让块级元素同行显示

4.浮动能让行内元素可以设置宽高

5.可以使用margin，但是不能使用margin:0 auto;

在HTML中，浮动是指让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距。可以通过设置CSS的float属性来实现元素的浮动，如float:left让元素向左浮动，float:right让元素向右浮动，float:none让元素不浮动。

注意！！一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围。

我们来看一个案例:

我们如何实现这样的效果呢？其实很简单:

xml 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;/*不再占据高度*/
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="text">浮动是指元素脱离标准普通流的控制移动到指定位置。在CSS中，通过设置元素的float属性，可以让元素在页面中浮动起来。浮动可以应用于任何元素，包括文本、图像和块级元素等。
​
        浮动的原理是，将元素的display属性设置为float，然后设置其float属性为left或right，即可让元素向左或向右浮动。当元素被浮动时，它将从文档流中移除，并且其周围的元素将重新排列以填补空白。
        
        浮动的作用是让多个块级元素水平排列成一行，这使得浮动成为网页布局的重要手段之一。通过使用浮动，可以实现文字环绕图像、创建多列布局、对齐行内元素等多种效果。</div>
</body>
</html>

接下来，我们思考要如何实现让 三个块级元素处于同一行呢？没错，浮动！！

我们定义三个div元素，设置好他们的高度和宽度,再给div设置为浮向左浮动，便实现了我们想要的效果！！

xml 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{
             text-align: center;控制非块级元素水平居中 
        } */
        *{
            font-size: 0;/*能够取消行内块级元素的换行带来的间隔 */
        }
        div{
            width: 100px;
            height: 100px;
            float: left;
            /* display: inline-block;让块级元素变为行内块级元素 */
        }
        .item1{
            background-color: blue;
             /* float: left;浮动会让元素脱离文档流 */
             /* margin: 0 auto;上右下左 */
             display: inline-block;
        }
        .item2{
            background-color: red;
            /* float: left;只能让别人盖住 */
        }
        .item3{
            background-color: green;
            /* float: left;三个都浮动，能让三个元素在同一行 */
        }
    </style>
</head>
<body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
​
</body>
</html>

好了，到这里浮动基本介绍已经完毕！！随着浮动的使用也会给我们带来一系列问题！看案例!!

我们想要实现这样的效果!

在我们输出代码之后

xml 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;/*去掉无序的小点*/
            width: 200px;
            height: 100px;
            float: left;
        }
        /* nth-child(数字)第几个子容器,先选中一堆，在去选几个 */
        li:nth-child(1){
            background-color: red;
        }
        li:nth-child(2){
            background-color: rgb(6, 192, 233);
        }
        
        li:nth-child(3){
            background-color: rgb(163, 254, 7);
        }
        .text{
            width: 100px;height: 150px;
            background-color: rgb(233, 14, 241);
            /* clear: both; */
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="text">Hello World</div>
​
    </div>
</body>
</html>

却导致出现这样的结果？这是为什么呢？

这是因为浮动的特点：

在HTML中，浮动是指让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距。可以通过设置CSS的float属性来实现元素的浮动，如float:left让元素向左浮动，float:right让元素向右浮动，float:none让元素不浮动。

浮动的特性包括：

  1. 支持所有的CSS样式。
  2. 内容撑开宽高。
  3. 多个元素设置浮动会排在一排。
  4. 脱离文档流。
  5. 提升层级半级。

注意，一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围。

浮动可能会带来以下影响：

  1. 父元素高度塌陷：当子元素浮动时，父元素的高度将无法被撑开，这可能会导致布局上的问题。
  2. 影响后面元素的布局：浮动元素会脱离文档流，不会影响到后面的元素布局，这可能会导致后面的元素无法正确地排列。

因此我们要及时消除浮动后后续带来的影响。

如何消除浮动呢？

清除浮动(清除浮动带来的负面影响)常考点

会导致父容器的高度的塌陷，影响父容器之后的元素的页面布局

1.给父容器设置高度 太low

2.在最后一个浮动元素之后添加新的元素，再新元素上做清除浮动->clear(both 左右一起,left左 ,right右)

3.在父容器伪元素after上做 清除浮动

4.在下面被浮动影响的容器上做清除浮动

5.(最多)BFC(用其他更强大的功能顶替)

今天我们就介绍其中的两种方法。

首先是clear方法，天生为清除浮动而存在的方法。

拿到刚刚的案例:

xml 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;/*去掉无序的小点*/
            width: 200px;
            height: 100px;
            float: left;
        }
        /* nth-child(数字)第几个子容器,先选中一堆，在去选几个 */
        li:nth-child(1){
            background-color: red;
        }
        li:nth-child(2){
            background-color: rgb(6, 192, 233);
        }
        
        li:nth-child(3){
            background-color: rgb(163, 254, 7);
        }
        .text{
            width: 100px;height: 150px;
            background-color: rgb(233, 14, 241);
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="text">Hello World</div>
​
    </div>
</body>
</html>

当我们在.text中加入clear:both;这样我们的效果就会变为：

当然clear函数也可以别的地方大家可以自己去尝试一下！！

接下来我们来介绍今天的主角之二：

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

在HTML中，BFC（Block Formatting Context）直译为"块级格式化范围"。它是一种CSS渲染的规则，决定元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

BFC可以被触发几种方式，例如根元素或包含根元素的元素、浮动元素、绝对定位元素、行内块元素等。

BFC的主要作用是防止元素垂直外边距的折叠，控制元素垂直居中，防止布局混乱，以及实现文字环绕效果。要使用BFC，可以通过创建新的BFC上下文实现，例如使用overflow属性设置不为visible，使用flexbox或grid容器创建新的BFC，使用column-layout容器创建新的BFC，或使用伪元素创建新的BFC。

哪些属性可以创建BFC

1.float:left||right

2.position:absolute||fixed(固定定位，相对于浏览器屏幕)

3.display:inline-block;(不会让你脱离文档流)

4.display:table-cell....(table表格布局)

5.overflow:hidden||auto||overly(覆盖)||scroll

6.弹性盒子（display:flex||inline-flex）

BFC的特点

1.BFC容器在计算高度时，会将浮动元素的高度也计算在内

2.用来解决内外margin重叠问题(bug)

BFC容器的存在其实不是为了解决浮动的问题而存在的，它是为了解决HTML中存在的一个BUG而存在!

拿到之前的案例:

xml 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;/*去掉无序的小点*/
            width: 200px;
            height: 100px;
            float: left;
        }
        /* nth-child(数字)第几个子容器,先选中一堆，在去选几个 */
        li:nth-child(1){
            background-color: red;
        }
        li:nth-child(2){
            background-color: rgb(6, 192, 233);
        }
        
        li:nth-child(3){
            background-color: rgb(163, 254, 7);
        }
        .text{
            width: 100px;height: 150px;
            background-color: rgb(233, 14, 241);
            /* clear: both; */
        }
            </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="text">Hello World</div>
​
    </div>
</body>
</html>

我们先观察一下浮动带来的影响：

首先不仅仅是li脱离了文档流，而且其父容器ul的高度变为了0，这种情况称为容器塌陷。

而BFC容器恰恰可以解决这个问题！

如此，我们只需要将ul变为BFC容器"超人"，利用不存在脱离文档流的属性，就不仅仅可以解决浮动带来的脱离文档流的影响，还能解决容器塌陷的问题！

所以我们拿到了display:table-cell;将ul设置为表格单元格的显示方式

于是，我们的代码变为：

xml 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            display:table-cell;
        }
        ul li{
            list-style: none;/*去掉无序的小点*/
            width: 200px;
            height: 100px;
            float: left;
        }
        /* nth-child(数字)第几个子容器,先选中一堆，在去选几个 */
        li:nth-child(1){
            background-color: red;
        }
        li:nth-child(2){
            background-color: rgb(6, 192, 233);
        }
        
        li:nth-child(3){
            background-color: rgb(163, 254, 7);
        }
        .text{
            width: 100px;height: 150px;
            background-color: rgb(233, 14, 241);
            /* clear: both; */
        }
            </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!-- <div class="clear"></div> -->
        </ul>
        <div class="text">Hello World</div>
​
    </div>
</body>
</html>

这样我们就实现了这样的效果

不仅仅解决了浮动脱离浮动流带来的后续布局问题,还解决的容器塌陷的问题。

总结:

scss 复制代码 
# 文档流，从上往下，从左往右
块级元素，行内块级元素，行内元素 三类
浮动一开始是为了满足文字环绕
浮动会让块级元素不再是块级元素
# 块级
1. 默认占据一整行
2. 可以设置宽高
# 行内块 
1.可以同一行显示
2.可以设置宽高
3.空格换行会导致元素产生间隔,换行会被浏览器当成字体处理
# 行内 
1.可以同行显示
2.不可以设置宽高 span也是行内
​
浮动：会让元素脱离文档流 和绝对定位相同，但是浮动只能左右浮动
水平方向：text-align非块级居中,margin：0 auto;控制块级水平居中
浮动元素不能margin : 0 auto;只能margin：0
​
# 浮动
1.会脱离文档流
2.文字环绕
3.让块级元素同行显示
4.浮动能让行内元素可以设置宽高
5.可以使用margin，但是不能使用margin:0 auto;
​
# 清除浮动(清除浮动带来的负面影响)常考点
会导致父容器的高度的塌陷，影响父容器之后的元素的页面布局
1.给父容器设置高度 太low
2.在最后一个浮动元素之后添加新的元素，再新元素上做清除浮动->clear(both 左右一起,left左 ,right右)
3.在父容器伪元素after上做 清除浮动
4.在下面被浮动影响的容器上做清除浮动
5.(最多)BFC(用其他更强大的功能顶替)
​
# BFC 容器 Block Formatting Context 块级格式化上下文
- 哪些属性可以创建BFC
1.float:left||right
2.position:absolute||fixed(固定定位，相对于浏览器屏幕)
3.display:inline-block;(不会让你脱离文档流)
4.display:table-cell....(table表格布局)
5.overflow:hidden||auto||overly(覆盖)||scroll
6.弹性盒子（display:flex||inline-flex）
​
- BFC的特点
1.BFC容器在计算高度时，会将浮动元素的高度也计算在内
2.用来解决内外margin重叠问题(bug)

好了！今天我们的学习就到此结束啦！！如果你有想要分享的想法或者指正欢迎留言！

点一个小小的赞鼓励一下吧！！🌹🌹🌹

相关推荐
栈老师不回家7 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙12 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
一颗松鼠17 分钟前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
小远yyds37 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解