【HTML+CSS】清除浮动

清除浮动

清除浮动带来的负面影响—高度塌陷

💡在网页中使用float浮动时，可能会遇到高度塌陷的问题。高度塌陷指的是在父元素没有设置高度的情况下，父元素的高度是由子元素的内容撑开，这时候给子元素设置浮动会导致父元素没有高度，从而改变页面布局。这时候就需可以使用清除浮动解决问题。

清除浮动的方法

• 给高度塌陷的盒子加高度
  • 缺点: 违背了高度自适应
• 给高度塌陷的盒子加overflow: hidden
  • 缺点: 造成溢出部分影藏
• 给高度塌陷的盒子里面的最后面加一个空的div, 设置属性clear: both
  • 缺点: 产生不必要的标签

<style>
        .father{
            width: 300px;
            background-color: pink;
            border: 4px solid red;
            /* 方法一设置高度 */
            /* 方法二overflow:hidden */
            /* overflow: hidden; */
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        /* 方法三加个空盒子清除浮动 */
        /* .last{
            clear: both;
        } */
        
</style>
<div class="father clearfix">
        <div class="son"></div>
        <div class="last"></div>
</div>

clear: 清除浮动所带来的负面影响

• none 默认
• left 清除左浮动带来的影响
• right 清除右浮动带来的影响
• both 清除所有浮动带来的影响

万能清除法

💡所谓万能清除法适用于任何清除浮动，也是常用的一种方法。通常万能清除法会放在reset.css重置样式表中使用，又方便又好用。

<style>
        .clearfix::after{
            /* 方法四可以写入重置样式 */
            content: "";
            display: block;
            clear: both;
            /* 加三行保险 */
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
</style>