清除浮动

结构及样式

• html

    <div id="outer" style="background-color: skyblue">
        <div class="inner"></div>
        <p>some texts</p>
    </div>

• css

        .inner {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 10px;
            float: left;
            /* 会让父级盒子高度塌陷 */
        }

• 页面截图

清除浮动的几种方式

• 增加一个div
  
• 父元素触发bfc
  
• 利用伪元素
  

清除浮动后的截图