• 对于BFC的理解

    1.BFC是啥

     BFC(Block formatting contexts)

    块格式化上下文,是一种特性,它决定了其子元素将如何布局,以及和其他元素的相互关系和作用

    2.怎么触发BFC 特性

    有以下六种方法

    1.根元素()

    2.浮动元素(元素的float不为none,为left.right)

    3.绝对定位元素(元素的position为absolute或fixed)

    4.行内块元素(元素的display为inline-block)

    5.表格单元格(元素的display为table-cell,HTML表格单元格默认为该值)

    6.overflow不等于visible,为  auto,scroll,hidden

    3.BFC特性有什么作用?

    作用有以下四点

    1.包含内部浮动

    2.可以排除外部浮动带来的影响

    3.阻止外边距重叠

    4.解决margin塌陷问题

    1.包含内部浮动

      display: flow-root 

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     .box{
    10.       border: 1px solid red;
    11.     }
    12.     .inner{
    13.       height: 100px;
    14.       width: 100px;
    15.       background-color: pink;
    16.       float: left;
    17.     }
    18.   style>
    19. head>
    20. <body>
    21.   <div class="box">
    22.     <div class="inner">div>
    23.   div>
    24. body>
    25. html>

    解决方法

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     .box{
    10.       border: 1px solid red;
    11.       /* 这个是c3新增,专门开启触发新特性的,不会额外的副作用 */
    12.       display: flow-root;
    13.     }
    14.     .inner{
    15.       height: 100px;
    16.       width: 100px;
    17.       background-color: pink;
    18.       float: left;
    19.     }
    20.   style>
    21. head>
    22. <body>
    23.   <div class="box">
    24.     <div class="inner">div>
    25.   div>
    26. body>
    27. html>

     2.可以排除外部浮动带来的影响

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     .box{
    10.       border: 1px solid red;
    11.     }
    12.     .inner{
    13.       height: 100px;
    14.       width: 100px;
    15.       background-color: pink;
    16.       float: left;
    17.     }
    18.   style>
    19. head>
    20. <body>
    21.   <div class="box">
    22.     <div class="inner">div>
    23.     <p class="article">
    24.            蜀道难
    25.       噫吁嚱，危乎高哉！蜀道之难，难于上青天！
    26.       蚕丛及鱼凫，开国何茫然！
    27.       尔来四万八千岁，不与秦塞通人烟。
    28.       西当太白有鸟道，可以横绝峨眉巅。
    29.       地崩山摧壮士死，然后天梯石栈相钩连。
    30.       上有六龙回日之高标，下有冲波逆折之回川。
    31.       黄鹤之飞尚不得过，猿猱欲度愁攀援。
    32.       青泥何盘盘，百步九折萦岩峦。
    33.       扪参历井仰胁息，以手抚膺坐长叹。
    34.       问君西游何时还？畏途巉岩不可攀。
    35.       但见悲鸟号古木，雄飞雌从绕林间
    36.       又闻子规啼夜月，愁空山。
    37.       蜀道之难，难于上青天，使人听此凋朱颜。
    38.       连峰去天不盈尺，枯松倒挂倚绝壁。
    39.       飞湍瀑流争喧豗，砯崖转石万壑雷。
    40.       其险也如此，嗟尔远道之人胡为乎来哉！
    41.       剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
    42.       所守或匪亲，化为狼与豺。
    43.       朝避猛虎夕避长蛇。
    44.       磨牙吮血，杀人如麻。
    45.       锦城虽云乐，不如早还家。
    46.       蜀道之难，难于上青天，侧身西望长咨嗟！
    47.     p>
    48.   div>
    49. body>
    50. html>

     解决办法

      .article{                                          在style里添加这一行代码即可

          display: flow-root;

        }

     

     3.阻止外边距重叠

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     .box{
    10.       border: 1px solid red;
    11.     }
    12.     .inner1{
    13.       height: 100px;
    14.       width: 100px;
    15.       background-color: pink;
    16.       margin-bottom: 100px;
    17.     }
    18.     .inner2{
    19.       margin-top: 100px;
    20.       height: 100px;
    21.       width: 100px;
    22.       background-color: deeppink;
    23.     }
    24.   style>
    25. head>
    26. <body>
    27.   
    28.   <div class="box">
    29.     <div class="inner1">div>
    30.     <div class="inner2">div>
    31.   div>
    32. body>
    33. html>

     解决办法

     思考题: 为什么不直接给box设置display:flow-root属性

     因为给box设置,没啥用,它们两还是处于同一级

    4.解决margin塌陷

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     .box{
    10.       width: 400px;
    11.       height: 400px;
    12.       background-color: green;
    13.      
    14.     }
    15.     .inner{
    16.       height: 100px;
    17.       width: 100px;
    18.       background-color: pink;
    19.       margin-top: 100px;
    20.     }
    21.     /* 如果父元素没有border 和padding,给其子元素添加的margin-top样式会作用于父元素上 */
    22.   style>
    23. head>
    24. <body>
    25.   <div class="box">
    26.     <div class="inner">div>
    27.   div>
    28. body>
    29. html>

     解决方法                      右边的是,解决完毕后的结果

    在 .box 里 加个 display:flow-root

  • 相关阅读:
    代码随想录-43-144. 二叉树的前序遍历、44-94. 二叉树的中序遍历、45-145. 二叉树的后序遍历
    【c语言】探索内存函数
    Redis+AOP实现一个可通用的分布式锁——改进
    已解决ERROR: No matching distribution found for cv2
    RT-Thread 双向链表（学习笔记）
    【STM32+HAL+Proteus】系列学习教程---串口USART（DMA 方式）定长，不定长收发。
    怎样在PDF上直接编辑文字？这几种编辑方法需要掌握
    【WMWare 克隆CentOS虚拟机 】解决克隆后 ip 冲突 & 主机名重复问题
    什么是 XML？使用IntelliJ IDEA 创建一个简单的 xml 文件
    SmartSoftHelp 7.0 最专业的c#代码生成器
  • 原文地址：https://blog.csdn.net/LJM51200/article/details/126050881