css 如何清除浮动带来的影响

高度塌陷怎么办?

当咱们用一个div(就叫大盒子吧) 取包裹其余盒子(小盒子)的时候,小盒子所有设置了浮动float, 从咱们平常认知当中:小盒子从大盒子中拿出来,那么大盒子知识内容部分(content)空了并不影响到什么. 可是在这里会形成高度塌陷, 父元素的高度会消失

.parent{
            background-color: #ccc;
        }
        .box01{
            width:100px;
            height:50px;
            background-color:pink;
            float:left;
        }
        .box02{
            width:200px;
            height:100px;
            background-color:lightblue;
            float:left;
        }
        .box03{
            width:300px;
            height:150px;
            background-color:yellow;
            float:left;
        }

<div class="parent">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>

浮动前

浮动后

上面两组图是悬浮先后的对比,悬浮后父元素(大盒子)因为没有内容的支撑,形成了高度塌陷(height:0;)

那么如何解决的这个高度塌陷的问题呢?

1. 这是个笨办法, 给父元素设置个固定的高度,这样就不会形成塌陷,可是这个弊端也很明显, 父元素的高度不能随子元素改变.
2. 给父元素添加样式overflow:hidden; 这样父元素的高度会随内部子元素的改变作出相应的变化.一样也是有弊端的(overflow溢出, hidden 隐藏)字面意思超出父元素的部分会被隐藏起来,形成一些显示上的问题.
3. 还能够直接给父元素设置浮动,可是会对后续的元素形成影响,就像上篇文章说的那样,前面元素的悬浮,会形成后面元素跑到前面元素的下面,形成内容覆盖.
4. 还有一个比较高大上的方法能够清除浮动,eg.伪元素的使用.

伪元素:after用的最多的地方就是清除浮动,这样不会给结构上添加负担,并且不会影响布局
例如

.parents::after{
    content:""; /*注意:这里必定要写 即便没有要写的内容也要有.*/
    clear:both; /*清除两边的元素*/
    display:block;/*伪元素行内的特性*/
    
}

后面还会持续更新...