清除浮动是我们在编写页面时经常遇到的一个问题。在 HTML 中,如果我们父元素中包含了浮动元素,那么父元素的高度将会塌陷,从而使得页面布局混乱,这时候我们就需要用到清除浮动的技巧。其中使用 clear:both
可以清除浮动。接下来,本文将为大家讲解clear:both
的作用,以及它在页面布局中的应用。
clear:both的作用
在浮动元素存在的容器中,容器高度坍塌是最令人头疼的问题。如果我们想让父元素具有高度,就必须清除浮动,从而使得父元素自适应子元素的高度。其中,clear:both
可以做到以下效果:
- 清除左右浮动
- 清除内部浮动使父元素具有高度
- 清除自身浮动
clear:both的使用方法
在 CSS 中,我们可以使用 clear:both
命令来清除页面中的浮动元素。具体使用方法如下:
- 在父元素上添加
clear:both
:
.parent{
clear:both;
}
这样父元素就能自适应子元素高度了。
- 想要让元素不被左右浮动元素影响时,可以在元素内部添加
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
属性,使父元素清除子元素浮动,从而保证子元素自身不受影响。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:clear:both 的作用介绍 - Python技术站