清除浮动的6中常用方法

首先了解一下浮动的原理：给元素设置float属性后，该元素会脱离文档流，进行左右浮动，紧贴着父元素的左右边框。此元素空出的位置，由后续元素填充上去。

dom结构：

<div class="container">
    <div class="left">hello</div>
    <div class="right">world</div>
</div>

style样式：

* {
    margin: 0;
    padding: 0;
}
.container {
    border: 1px solid red;

}
.left {
    width: 100px;
    height: 100px;
    border: 1px solid;
    float: left;
}
.right {
    width: 100px;
    height: 100px;
    border: 1px solid;
    float: left;
}

父元素高度不能被撑开时，清除浮动的方法：

1.为父元素添加css属性

overflow: hidden;

2.在父元素子元素的末尾添加一个空的元素

添加后dom结构为：

<div class="container">
    <div class="left">hello</div>
    <div class="right">world</div>
    <div class="clear"></div>
</div>

设置

.clear {
    clear: both;
}

3.为父元素添加伪类

.container:after {
    content: '.';
    height: 0;
    clear: both;
    display: block;
}

4.为父元素添加绝对定位属性
position: absolute;
5.为父元素设置高度
height: 110px;
6.将父元素浮动
float: left;