float清除浮动

2018-12-09 11:18:49来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

清除浮动:

在非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属性。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深入解析Vue.js中v-bind v-model的使用和区别

下一篇:前端如何进行用户权限管理