HTMLcss清除浮动的几种方式

HTMLcss清除浮动的⼏种⽅式
浮动在HTML/CSS布局中⼗分常见，虽然浮动布局可以实现很多有⽤的排版效果，但是浮动的元素脱离了⽂档流，可能造成包含块⾼度塌陷、下⽅⾏框上移等⾏为。

因此在使⽤浮动实现想要的效果后，通常还需要清除浮动影响的布局来避免上述问题。

HTML/CSS中清除浮动的本质是需要清除浮动元素对正常⽂档流的影响。

浮动造成布局问题⽰例：
HTML代码部分：
<div class='container'>
<div class='son aqua'>⽔蓝</div>
<div class='son red float'>红</div>
<div class='son blue'>蓝</div>
</div>
CSS样式：
.container {
width: 500px;
background-color: #ccc;
}
.son {
width: 100px;
height: 100px;
text-align: center;
color: #ccc;
}
.aqua,
.blue {
line-height: 100px;
}
.aqua {
background-color: aqua;
}
.red {
height: 150px;
line-height:150px;
background-color: red;
float: left;
}
.blue {
background-color: blue;
}
⽤户代理呈现结果：
浮动元素超出包含块，并造成了排版⽂字问题
常⽤的清除浮动主要有以下⼏种⽅式：
⽅法⼀：为⽗元素添加overflow:hidden
当浮动元素为包含块⼦元素时，可以通过为包含块设置overflow:hidden;来实现清除浮动的效果。

overflow:hidden;会迫使⽗元素包含其浮动的⼦元素，这达到了清除浮动的效果。

虽然该声明的真正⽤途是防⽌包含元素被超⼤内容撑开。

应⽤overflow:hidden;之后，包含元素仍然保持其设定的宽度，⽽超⼤的⼦内容则会被容器剪切掉。

为⽗元素添加overflow:hidden;属性和值
.container {
width: 500px;
background-color: #ccc;
overflow: hidden;
}
⽤户代理呈现结果：
⽗元素包含浮动元素
⽅法⼆：添加⾮浮动的清除元素（推荐）
clear:both;清除浮动的实质是什么？本质是在⽤户代理流动布局时，为添加该属性值的元素布局不受其相邻左右浮动元素的影响。

在紧邻浮动元素的后⼀位兄弟元素添加clear属性，其中clear:both;表⽰清除左右浮动，clear:right;为清除右浮动，clear:left;为清除左浮动。

在红⾊div浮动元素后⾯的⾮浮动兄弟元素添加clear:both;清除浮动。

.blue {
background-color: blue;
clear:both;
}
⽤户代理呈现结果：
清除了浮动元素对下⽅布局的影响
如果浮动元素是⽗元素中的最后⼀个⼦元素，可以采⽤:after伪元素进⾏清除浮动元素。

HTML代码：
<div class='container clearfix'>
<div class='son aqua'>⽔蓝</div>
<div class='son red float'>红</div>
</div>
CSS设置：
.container {
width: 500px;
background-color: #ccc;
}
.son {
width: 100px;
height: 100px;
text-align: center;
color: #ccc;
}
.aqua,
.blue {
line-height: 100px;
}
.aqua {
background-color: aqua;
}
.red {
height: 150px;
line-height: 150px;
background-color: red;
float: left;
}
浮动元素脱离⽂档流，因此红⾊区块并没有包裹在⽗元素中。

⽤户代理呈现的效果如下：
这种最后⼀个⼦元素为浮动元素的清除浮动的⽅式，可以采⽤伪元素:after来清除。

其原理还是在浮动元素下⽅添加⾮浮动的清除元素。

.clearfix:after {
content: '.';
height: 0;
display: block;
visibility: hidden;
clear: both;
}
添加:after伪元素清除浮动后，⽤户代理呈现的效果如下：
⽅法三：浮动⽗元素
将浮动元素的⽗元素设置为浮动，可以让其包裹内部⼦元素。

但是仅仅为清除⼀个浮动⽽造成另⼀个元素浮动，很可能引起其它排版问题，需要在布局时留意。

<div class='container clearfix'>
<div class='son aqua'>⽔蓝</div>
<div class='son red float'>红</div>
</div>
.container {
width: 500px;
background-color: #ccc;
float:left;
}
.son {
width: 100px;
height: 100px;
text-align: center;
color: #ccc;
}
.aqua {
line-height: 100px;
}
.aqua {
background-color: aqua;
}
.red {
height: 150px;
line-height: 150px;
background-color: red;
float: left;
}
为浮动元素的⽗元素添加浮动：
.container {
width: 500px;
background-color: #ccc;
float:left;
}
⽤户代理呈现效果：。