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;/*伪元素行内的特性*/
    
}

后面还会持续更新...