BFC是什么？

就是将开了BFC的区域隔离开，与其他布局不在一个层次了。就不会有影响。
可以理解为“结界”，通过特殊手段形成一个密闭的空间，无论里面的元素如何折腾也不会影响外面的元素，也就有了为了开启BFC可以解决margin值合并的问题，高度塌陷的问题等。

如何触发BFC的开启呢？

  • float的值不为none
  • overflow的值为auto、scroll或者hidden(建议hidden，副作用最小)
  • position值不为relative和static
  • …

    css常见高级技巧和高级属性汇总

    01、设置input的placeholder的字体样式

    ```javascript <!DOCTYPE html> 

  1. <a name="DcyEv"></a>
  2. ## 02、单行和多行文本超出省略号
  3. ```javascript
  4.  /* 
  5.     单行文本溢出显示省略号三部曲
  6.  */
  7. .box {
  8.   width: 100px;
  9.   height: 200px;
  10.   /* 1.先强制文本在一行显示 */
  11.   /* 默认值是normal，自动换行，nowrap不换行 */
  12.   white-space: nowrap;
  13.   /* 2.超出的部分隐藏 */
  14.   overflow: hidden;
  15.   /* 3.超出部分用省略号代替 */
  16.   text-overflow: ellipsis;
  17. }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  </style>
</head>

<body>
  <div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈</div>
</body>

</html>

03、负边距使用技巧

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .outer {
      margin-left: -3px;
    }

    .inner {
      float: left;
      height: 300px;
      width: 50%;
      /* 方案： */
      box-sizing: border-box;
      border-left: 3px solid #fff;
    }

    .inner1 {
      background-color: lightgreen;
    }

    .inner2 {
      background-color: lightcoral;
    }

    .inner3 {
      background-color: lightblue;
    }

    .inner4 {
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
    <div class="inner inner4">3</div>
  </div>
</body>

</html>

04、相邻兄弟选择器妙用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      width: 500px;
      margin: auto;
      list-style: none;
      padding: 0;
      border: 1px solid red;
      text-align: center;
    }

    li+li {
      border-top: 1px solid red;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>

</html>

05、粘(zhan)性定位（了解一下）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 1500px;
    }

    .box {
      width: 800px;
      height: 90px;
      background-color: lavenderblush;
      margin: 0 auto;
      margin-top: 200px;
      /* 粘性定位 */
      /* 以浏览器的窗口作为参照物 */
      /* 兼容性差 IE不支持 */
      position: sticky;
      /* 四个方向的值必须写一个才会生效 */
      top: 0;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="center"></div>

</body>

</html>