clear:both 的作用介绍

清除浮动是我们在编写页面时经常遇到的一个问题。在 HTML 中，如果我们父元素中包含了浮动元素，那么父元素的高度将会塌陷，从而使得页面布局混乱，这时候我们就需要用到清除浮动的技巧。其中使用 clear:both 可以清除浮动。接下来，本文将为大家讲解clear:both的作用，以及它在页面布局中的应用。

clear:both的作用

在浮动元素存在的容器中，容器高度坍塌是最令人头疼的问题。如果我们想让父元素具有高度，就必须清除浮动，从而使得父元素自适应子元素的高度。其中，clear:both 可以做到以下效果:

1. 清除左右浮动
2. 清除内部浮动使父元素具有高度
3. 清除自身浮动

clear:both的使用方法

在 CSS 中，我们可以使用 clear:both 命令来清除页面中的浮动元素。具体使用方法如下：

1. 在父元素上添加 clear:both：

.parent{
    clear:both;
}

这样父元素就能自适应子元素高度了。

1. 想要让元素不被左右浮动元素影响时，可以在元素内部添加 clear:both：

.child{
    clear:both;
}

clear:both的示例

示例1：清除浮动后父元素具有高度

HTML 代码：

<div class="container">
    <div class="float-left">左浮动元素</div>
    <div class="float-right">右浮动元素</div>
    <div class="clearfix"></div>
</div>

CSS 代码：

.container{
    border: 1px solid #ccc;
}
.float-left{
    float:left;
}
.float-right{
    float:right;
}
.clearfix{
    clear:both;
}

该示例中，我们使用浮动实现了左右两个元素的布局。但如果不清除浮动，父元素将不会自适应子元素的高度。添加 clearfix 类后，父元素就自动具有了高度。

示例2：清除自身浮动

HTML 代码：

<div class="container">
    <div class="float-left">我是左浮动的文本</div>
    <div class="clearfix"></div>
    <div class="float-right">我是右浮动的图片<img src="test.jpg"></div>
</div>

CSS 代码：

.float-left{
    float:left;
}
.float-right{
    float:right;
}
.clearfix{
    clear:both;
}
img{
    float:right;
}

该示例中，我们将图片右浮动，并且添加 float:right 属性。但是当我们在图片后添加文字后发现，文字也一并向右浮动了，这时候我们可以在图片的父元素上添加 clearfix 属性，使父元素清除子元素浮动，从而保证子元素自身不受影响。