在使用CSS编写代码时,我们经常会用到一个属性:float,使用它会使网页的排版达到我们所期待的效果,但是在此同时使用它也会带来一些负面影响,而又怎么清除这些负面影响,这就是这篇文章的主题。
一、什么是浮动?
通过设置float的值不为none,使得元素按特定的方向脱离文档流,不占据空间,浮动元素碰到包含它的边框或者浮动元素的边框停留
二、浮动所带来的负面影响
1、会把行级元素,块级元素隐式的转换成行级块元素。
2、在没有定义具体宽度的情况下,使自身的宽度从100%变为内容的宽度和高度。
3、脱离其父元素,从而无法撑开父元素的高度,从而造成高度塌陷。
4、在当前行上脱离原来的位置,如果有块级兄弟元素,会占用该元素原来的位置,并处于该元素下层。
5、如果有行级兄弟元素,则兄弟元素会环绕浮动元素排列。
三、清除浮动的几种办法
1、clear:both;
2、父元素设置overflow:hidden/auto; zoom:1;
其中overflow:hidden;的作用是溢出隐藏,清除浮动。
3、不多说,直接上代码(推荐用法)
.fix{
display:block;
content:'.';
height:0;
clear:both;
visibility: hidden;
}
再来一个
.fix{
display:block;
content:'';
clear:both;
}
应用浮动带来的影响还是很大的,所以我们千万不能忘了清除浮动这个步骤~