创建BFC

一、什么是BFC

BFC:全称 Block Formating Context （块级格式化上下文）：

它是一个独立的渲染区域，这个区域与外部毫不相干

如何创建BFC

0. float 的值不是 none

1. position 的值不是 static 或者 relative

2. display 的值是 inline - block、table - cell 、flex 、table - caption 或者 inline - flex

3. overflow 的值不是 visible

   BFC的作用：

   利用BFC 避免margin 重叠

   *{
   margin: 0;
   padding: 0;
   }
   p {
       color: #f555;
       background: yellow;
       width: 200px;
       line-height: 100px;
       text-align:center;
       margin: 30px;
   }
   div{
       /* 激活BFC */
       overflow: hidden;
   }
   <p>看看我的 margin是多少</p>
   <div>
       <p>看看我的 margin是多少</p>
   </div>
   

清楚浮动，解决父元素高度坍塌问题

.par {
    border: 5px solid rgb(91, 243, 30);
    width: 300px;
   /* 激活BFC */
    overflow: hidden;
}

.child {
    border: 5px solid rgb(233, 250, 84);
    width:100px;
    height: 100px;
    float: left;
}
<div class="par">
    <div class="child"></div>
    <div class="child"></div>
</div>

自适应两栏布局

  <style>
    *{
    margin: 0;
    padding: 0;
        }
    body {
        width: 100%;
        position: relative;
           }
.left {
    width: 100px;
    height: 150px;
    float: left;
    background: rgb(139, 214, 78);
    text-align: center;
    line-height: 150px;
    font-size: 20px;
}
.right {
     /* 激活BFC */
    overflow: hidden;
    height: 300px;
    background: rgb(170, 54, 236);
    text-align: center;
    line-height: 300px;
    font-size: 40px;
}
</style>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>

二、列表

有序列表：

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ol>

无序列表:

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

定义列表：

<dl>
    <dt></dt>
    <!-- 会缩进 -->
    <dd></dd>
 </dl>

列表项样式：list-style

属性值	含义
none	取消列表样式
disc	默认，标记是实心圆
circle	标记是空心圆
square	标记是实心方块
decimal	标记是数字
lower-alpha、upper-alpha	标记是大小写英文字母

<style>
ul{
list-style: upper-alpha;
}
</style>
<ul>
        <li>我的</li>
        <li>猫咪</li>
 </ul>