清除浮动的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;