H5 清除浮动

1、为什么要清除浮动？
为了解决块级元素浮动后父元素塌陷问题。

2、为什么会产生 父元素塌陷？
首先父元素没有设置高度，父元素的高度是由子元素中最高的控件决定，撑开
简单可以这样理解，原本是在和父元素在同一层级上。当子元素浮动后，这样子元素会浮在父元素上面不在占据父元素的空间。原本是可以撑开父元素，结果就不在被撑开。

3、怎么解决父元素塌陷问题？
下面会使用例子的形式提供三种 解决父元素塌陷问题。

css 代码：

<style>
        /* 3. 清除浮动 */
        .clearfix:after {
    
    
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0;
        }

        /* 清除浮动 */
        /* .clearfix {
    
    
            *zoom: 1;
        } */

        .father {
    
    
            width: 400px;
            border: 1px solid red;
            /* 1、解决父亲塌陷问题 直接给父元素设置  height */
            /* height: 100px; */
            /* 2、给父元素设置 float */
            /* float: left; */
        }

        .son {
    
    
            width: 100px;
            height: 100px;
            background-color: aqua;
        }


        /* 浮动会导致父亲塌陷 */
        .left {
    
    
            float: left;
        }

        .right {
    
    
            float: right;
        }

html代码：

  <div class="father clearfix">
        <div class="son left"></div>
        <div class="son right"></div>
    </div>

建议使用 clearfix 类进行清除浮动。

清除浮动可能还有其他方法，这里仅供自己学习期间总结。