css的清除浮动
CSS技巧之清除浮动（Clearfix）
浮动是 CSS 中一项非常重要的布局技术，在网页的排版中广泛应用。但同时也会导致一些问题，比如父元素高度塌陷等。清除浮动（Clearfix）技术就是为了解决这个问题而产生的，本文将介绍清除浮动的几种常用方法。
一、浮动的问题
首先，我们来理解一下浮动的问题。
HTML：
<div class="
parent"
>
<
div class="
left"
>
左侧区域<
/div>
<
div class="
right"
>
右侧区域<
/div>
<
/div>
CSS：
.left {float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}
效果如下图所示：
可以看到，左侧区域和右侧区域都运用了浮动技术。但如果，我们希望父元素（即 .parent）的高度与子元素的高度相等，那么会出现以下的问题：
可以看到，父元素高度明显缩小了。这是因为子元素使用了浮动，所以它们都脱离了文档流，父元素没有包含它们，导致计算高度的时候不把它们计算在内。
二、清除浮动的几种方法
为了解决这个问题，我们需要通过清除浮动来让父元素重新计算高度。下面介绍一些常用的清除浮动方法：
1、使用空标签清除浮动
这是一种非常常见的方法，它利用空标签的特性来清除浮动，代码如下：
HTML：
<div class="
parent"
>
<
div class="
left"
>
左侧区域<
/div>
<
div class="
right"
>
右侧区域<
/div>
<
div style="
clear: both;
"
>
<
/div>
<
/div>
CSS：
.left {float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}
在父元素的最后加上一个空标签，并设置 clear:both，表示该标签清除浮动。
但是这种方法比较麻烦，需要添加一个无意义的标签，不利于代码的维护。
2、使用 ::after 伪元素清除浮动
与第一种方法类似，使用 ::after 伪元素来清除浮动。由于 ::after 是一个块元素，可以在浮动元素后面添加一个块级元素来清除浮动。
HTML：
<div class="
parent"
>
<
div class="
left"
>
左侧区域<
/div>
<
div class="
right"
>
右侧区域<
/div>
<
/div>
CSS：
.left {float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}
.parent::after {
content: "
"
;
display: block;
clear: both;
}
在父元素上使用 ::after 伪元素，并设置 content:"
"
;
display:block;
clear:both;
，表示在父元素之后添加一个块级元素，清除浮动。
这种方法只需要在父元素上添加 CSS 样式，不需要添加多余的 HTML 标签，非常方便。
3、使用 BFC 清除浮动
BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念，它可以让元素在一个独立的渲染区域内进行渲染，可以清除浮动，实现方式如下：
HTML：
<div class="
parent"
>
<
div class="
left"
>
左侧区域<
/div>
<
div class="
right"
>
右侧区域<
/div>
<
/div>
CSS：
.left {float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}
.parent {
overflow: hidden;
}
在父元素上设置 overflow:hidden，这个时候，父元素就形成了一个 BFC，让浮动元素能够正确地包含在内。
但是这种方法也有一些限制，因为它会改变父元素的样式，比如父元素不能设置负 margin，也不能设置 z-index 属性。
三、总结
本文介绍了清除浮动的几种方法，分别是使用空标签清除浮动、使用 ::after 伪元素清除浮动、以及使用 BFC 清除浮动。这些方法都是实践过的技巧，可以灵活应用于项目开发中，解决浮动带来的问题。
在网页设计中，浮动是经常使用的布局方式。但是浮动元素会对页面布局和排版带来一些不必要的影响。为了消除这些影响，我们需要清除浮动。那么如何清除浮动呢？本文将为大家详细解析CSS清除浮动的方法。
一、何为浮动
浮动是CSS中最基础的布局方式之一，它可以将元素沿着其容器的左侧或右侧移动。通常用于实现图片或文字环绕效果。
二、影响
浮动元素会影响其他元素的布局。如果没有清除浮动，就会出现莫名其妙的布局问题，比如父元素高度为0，子元素间出现间隔等。
三、清除浮动的方法
1.使用clear属性
在浮动元素的下方添加一个空的元素，并添加clear属性即可清除浮动。代码如下：
.clear{
clear:both;
}
2.使用overflow属性
给浮动元素的父元素添加overflow属性，值设置为auto或hidden即可清除浮动。代码如下：
.parent{
overflow:hidden;
}
四、清除浮动的技巧
1.清除浮动的元素一定要放在浮动元素后面，否则清除浮动会失效。
2.清除浮动的元素可以放在浮动元素的内部也可以放在外部，建议放在内部。
五、实战应用
1.清除浮动后父元素高度为0的问题
父元素高度为0通常是由于子元素都浮动导致的。此时可以在父元素的尾部添加一个空元素并加上clear属性即可解决问题。代码如下：
.parent{
font-size:0;
}
.child{
float:left;
font-size:16px;/*还原字号*/
}
.clear{
clear:both;
}
2.清除浮动后子元素间出现间隔的问题
当使用浮动元素时，如果子元素原本是紧贴在一起的，而清除浮动后出现间隔，那么可以在父元素添加font-size:0，再在子元素上还原字号即可解决问题。
六、总结与展望
清除浮动是CSS中必备的技能，能够解决很多布局问题。除了本文介绍的方法，还有很多其他的方式可以清除浮动，大家可以根据实际情况选择合适的方法。期待大家在实践中发现更好的清除浮动方式。
