CSS3 BFC-优快云博客

本文链接：https://blog.youkuaiyun.com/JunGuanDreams/article/details/130856646

1，定义

1，BFC演示1

代码演示

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      /* display: flex; */
    }
    .outer{
      width: 400px;
      background-color: #888;
      /* float: left; */
      /* position: absolute; */
      /* display: inline-block; */
      /* display: table; */
      /* overflow: auto; */
      /* column-count: 1; */
      display: flow-root;
    }
    .inner{
      width: 100px;
      height: 100px;
      margin: 20px;
    }
    .inner1{
      background-color: red;
    }
    .inner2{
      background-color: orange;
    }
    .inner3{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner inner1"></div>
    <div class="inner inner2"></div>
    <div class="inner inner3"></div>
  </div>
</body>

2，BFC演示2

代码演示

<style>
    .box{
      width: 100px;
      height: 100px;
    }
    .box1{
      background-color: orange;
      float: left;
    }
    .box2{
      background-color: green;
      /* float: left; */
      /* position: absolute; */
      /* display: inline-block; */
      /* display: table; */
      /* overflow: auto; */
      /* column-count: 1; */
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

3，BFC演示3

代码演示

 <style>
    .outer{
      width: 400px;
      background-color: gray;
      /* float: left; */
      /* position: absolute; */
      /* display: inline-block; */
      /* display: table; */
      /* overflow: auto; */
      /* column-count: 1; */
    }
    .box{
      width: 100px;
      height: 100px;
      float: left;
    }
    .box1{
      background-color: orange;
    }
    .box2{
      background-color: green;
      
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
</body>

4，学习路线