清除浮动的方法

清除浮动是解决子元素浮动之后,撑不开标准流父级块元素的高度,造成布局混乱的方法

解决方法:

1.给父元素设置高度

float: left;
width: 100px;
height: 100px;

2.额外标签法

内容:

在最后一个浮动元素的后边,添加额外标签块元素,使用clear:both清除浮动

<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="clear"></div>
</div>

样式:

把左右浮动产生的影响清除掉

.clear {
    clear: both;
}

3.单伪元素清除法

转为块元素:display: block;

第一种写法:

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    }

第二种写法:

显示模式为隐藏:visibility: hidden;

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    }

4.双伪元素清除法

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    }
.clearfix::after {
    clear: both;
    }

5.给父元素设置:overflow:hidden

直接在父元素上设置:overflow:hidden就可以