清除浮动(clearfix)是CSS hack技术中的一种,它主要用于清除父级容器元素中子级浮动元素带来的影响,以避免出现莫名其妙的问题。下面是完整的清除浮动攻略。
什么是清除浮动(clearfix)?
清除浮动是在一个容器里包含了浮动元素后,为了让父级元素能够自适应子元素高度而产生的一种CSS hack技术。在不清除浮动的情况下,容器无法识别浮动元素的高度,因而不能正确地包含浮动元素。
如何实现清除浮动(clearfix)?
具体实现方式有多种,下面列举其中几种。
1. 通过CSS伪元素
.clearfix::after {
content: "";
display: block;
clear: both;
}
这种方式是通过给父级容器的伪元素后面添加一个空元素,并使用清除属性(clear:both
)让元素包含自身浮动的内容。其中,content
属性必须添加,否则伪元素将不会生效。
2. 通过overflow属性
.clearfix {
overflow: auto;
zoom: 1;
}
这种方式是通过设置父级元素的overflow
属性来清除浮动,当overflow属性值为auto
或hidden
时,可以让元素包含自身浮动的元素。同时,由于在IE6-7浏览器中overflow
属性不会被继承,需要添加Zoom hack,以兼容IE浏览器。
示例说明
下面通过两个示例来演示如何使用清除浮动。
示例一
<div class="clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
width: 50%;
background-color: #ccc;
}
.right {
float: right;
width: 50%;
background-color: #eee;
}
在这个例子中,我们给父级元素添加了clearfix
类,同时使用了清除浮动的第一种方式。这样就清除了子元素浮动造成的影响,使得父元素高度自适应。
示例二
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
#container {
overflow: auto;
zoom: 1;
background-color: #eee;
}
.item {
float: left;
width: 33.33%;
height: 100px;
background-color: #ccc;
}
在这个例子中,我们同样使用了清除浮动方式的第二种方法,通过设置父级元素的overflow
属性来清除子元素浮动造成的影响。这样就能够正确地自适应容器的高度。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css hack之清除浮动(clearfix) - Python技术站