float清除浮动

  • 时间:
  • 来源:互联网

清除浮动:

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

本文链接http://element-ui.cn/news/show-2012.aspx