• 对于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

  • 相关阅读:
    Spring+SpringMVC 整合 Mybatis 之多数据源
    p15~p22基本链表容器和高级链表容器迭代器
    前端面试题---作用域链和原型链
    聚观早报 | 黑五电子产品销售额飙升；谷歌不满微软收购动视暴雪
    springboot 读取 yml 配置的几种方式
    【PTHREAD】线程互斥与同步之信号量
    Kafka消息发送可靠性分析
    linux安装oracle jdk
    小米面试题——不用加减乘除计算两数之和
    Vue系列之事件绑定
  • 原文地址：https://blog.csdn.net/LJM51200/article/details/126050881