当前位置: 移动技术网 > IT编程>网页制作>CSS > float清除浮动

float清除浮动

2018年12月08日  | 移动技术网IT编程  | 我要评论

the one歌词,play视频在线华人,毒水之源

清除浮动:

在非ie浏览器下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。即父级对象盒子无法被撑开,这个现象叫浮动溢出,为了防止这个现象的出现而进行的css处理,就叫css清除浮动。

 

clear语法:

clear : none | left | right | both

取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素。如果一个元素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clear:right,则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。

 

方法一:

<style>

.clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容; 
content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block;               <----加入的这个元素转换为块级元素。 
clear: both;                  <----清除左右两边浮动。 
visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已; 
line-height: 0;               <----行高为0; 
height: 0;                    <----高度为0; 
font-size:0;                  <----字体大小为0; 
} 
.clearfix { *zoom:1;}         <----这是针对于ie6的,因为ie6不支持:after伪类,这个神奇的zoom:1让ie6的元素可以清除浮动来包裹内部元素。

</style>

整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。 
之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。 


那么问题来了,如何使用上面这段代码呢?

只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。 
如:

<div class="head clearfix"></div>

 

方法二:

直接在后面加上一个取消了浮动的空div:<div style="clear:both"></div>

 

方法三:

 直接在父级元素加上overflow:hidden属性。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网