BFC布局规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向上的距离由 margin 决定，同属一个BFC的两个相邻Box的 margin 会发生重叠
每个元素的左外边缘(margin-left)，与包含块的左边(contain box left)相接触(对于从左到右的格式化)。
即使存在浮动也是如此，除非这个元素自己形成一个新的BFC
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算

BFC触发条件

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或则releative中的任何一个

BFC举例

解决maring重叠

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.   .p {
  8.       width: 200px;
  9.       height: 50px;
  10.       margin: 50px 0;
  11.       background-color: red;
  12.   }
  14.   .wrap {
  15.       overflow: hidden;
  16.       background: #00b48f;
  17.   }
  18.   </style>
  19. </head>
  20. <body>
  21. <div class="p"></div>
  22. <div class="p"></div>
  23. <div class="wrap">
  24.   <div class="p"></div>
  25. </div>
  26. </body>
  27. </html>

两栏自适应布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.   div {
  8.       width: 300px;
  9.   }
  11.   .aside {
  12.       width: 100px;
  13.       height: 150px;
  14.       float: left;
  15.       background: #00a4ff;
  16.   }
  18.   .main {
  19.       height: 200px;
  20.       background-color: #7FFFD4;
  21.       overflow: hidden;
  22.   }
  23.   </style>
  24. </head>
  25. <body>
  26. <div class="aside"></div>
  27. <div class="main"></div>
  28. </body>
  29. </html>

清除内部浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.       .child {
  8.         border: 1px solid red;
  9.         height: 100px;
  10.         width: 100px;
  11.         float: left;
  12.       }
  14.       .parent {
  15.         border: 1px solid black;
  16.         width: 300px;
  17.         overflow: hidden;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="parent">
  23.       <div class="child"></div>
  24.     </div>
  25.   </body>
  26. </html>

IFC布局规则

  1. 内部的盒子会在水平方向，一个个地放置，起点是包含块的顶部；
  2. IFC的高度，由里面最高盒子的高度决定；
  3. 当一行不够放置的时候会自动切换到下一行；
  4. 水平方向上的margin border padding在框之间得到保留

  5. 在垂直方向上可以以不同的方式对齐：顶部或底部对齐，或者根据文字的基线对齐

    IFC触发条件

    font-size、line-height、height、vertical-align

    IFC举例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. <style>
    7. .box {
    8.    width: 150px;
    9.    height: 150px;
    10.    display: inline-block;
    11.    word-wrap: break-word;
    12.    background: green
    13. }
    15. #inlineBox {
    16.    vertical-align: top;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <div class="box">34u324039284903840932jo43k2jlk4khjvhfkdjv897897897fd</div>
    22. <div class="box" id="inlineBox">adsdjjdjjdks</div>
    23. </body>
    24. </html>