search

博客列表 >真枪实弹：演示BFC的三个作用，技术大牛真会玩！

真枪实弹：演示BFC的三个作用，技术大牛真会玩！

张福根一修品牌运营
张福根一修品牌运营原创
2020年10月27日 17:20:34773浏览

实例演示BFC的三个作用

效果展示：

BFC的三个作用

源码分享：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>实例演示BFC的三个作用</title>
  7.     <style>
  8.       * {
  9.         /* 初始化格式 */
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       .container {
  15.         border: 6px dashed cadetblue;
  16.       }
  17.       .container > .box {
  18.         color: cornflowerblue;
  19.         width: 10em;
  20.         height: 5em;
  21.         background-color: cyan;
  22.         border: 1px solid cornflowerblue;
  23.         /* 容器中的子元素进行浮动 */
  24.         float: left;
  25.         /* 子元素浮动会导致父级容器的高度消失,也叫"容器高度折叠" */
  26.       }
  28.       /* BFC特征1: 能够包含住"浮动元素"  */
  29.       .container {
  30.         overflow: hidden;
  31.       }
  33.       /* BFC特征2: 不会在垂直方向上产生外边距的折叠 */
  34.       .box.box1 {
  35.         float: none;
  36.         margin-bottom: 1em;
  37.       }
  39.       .box.box2 {
  40.         float: none;
  41.         margin-top: 2em;
  42.       }
  44.       /* BFC特征3: BFC不会与外部的浮动元素重叠 */
  45.       .container img {
  46.         float: left;
  47.       }
  48.       .container p {
  49.         overflow: hidden;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="box"></div>
  56.     </div>
  58.     <hr />
  60.     <div class="container">
  61.       <div class="box box1">box1</div>
  62.       <div class="box box2">box2</div>
  63.     </div>
  64.     <hr />
  65.     <div class="container">
  66.       <img
  67.         src="https://img.php.cn/upload/course/000/000/001/5f606a9a7fe99960.jpg"
  68.         width="200px"
  69.         height="120px"
  70.         alt=""
  71.       />
  72.       <p>
  73.         BFC特征3: BFC不会与外部的浮动元素重叠BFC特征3:
  74.         BFC不会与外部的浮动元素重叠BFC特征3:
  75.         BFC不会与外部的浮动元素重叠BFC特征3:
  76.         BFC不会与外部的浮动元素重叠BFC特征3:BFC不会与外部的浮动元素重叠BFC特征3:BFC不会与外部的浮动元素重叠BFC特征3:
  77.       </p>
  78.     </div>
  79.   </body>
  80. </html>

案例总结:

1、创建BFC的属性

  • overflow: hidden / auto /scroll, 不能是visible;
  • display:flex; display:grid;
  • position:absolute / fixed;
  • float:left / right , 不能 none;

2、BFC作用

  1. 包括浮动元素
  2. 防止外边距折叠
  3. 防止文档流围绕浮动元素排列
上一条：BFC和flex布局探讨和演示下一条：1026作业： 1. 实例演示BFC的三个作用 2. flex容器常用的四个属性, 并实例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多