清除浮动是指清除掉元素float属性。清除浮动-使用clear元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性。我们在CSS中引入了clear:left|right|both属性,其作用分别是在元素的左侧|右侧|两侧不允许存在float元素,我们可以用他来清除其副作用。
一、浮动引起的问题
(1)父元素的高度无法被撑开,影响与父元素同级的元素;
(2)与浮动元素同级的非浮动元素会跟随其后;
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构;
二、清除浮动的方法
1、利用clear清除浮动
.son {
clear: left | right | both | auto
}
2、父元素上使用after伪类
#parent:after {
content: '';
clear: both;
height: 0;
display: block;
}
3、利用overflow清除浮动
#parent {
overflow: auto;
display: inline-block;
}
4、父级div定义 伪类:after 和 zoom
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
易速网站优化公司 » CSS中为什么要清除浮动?如何清除?