首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS——float属性备忘札记

2013-09-05 
CSS——float属性备忘笔记通过指定CSS属性float的,从而使元素向左或向右浮动,然后由后继元素向上移动以填补

CSS——float属性备忘笔记

通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。

使用Float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。

所以需要在样式定义的后面进行清除浮动,清除浮动的方法有几种:

1.Clear:both清除浮动

clear清除浮动主要是借用clear属性来清除浮动,这是一种比较陈旧的清除浮动方法,但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动,我们需要在需要清除浮动地方的后面紧接着增加一个额外元素,比如说一个div标签,并且定义他们的样式为“clear:both”,其通常使用的结构方式如下:

  .clearfix:before,  .clearfix:after {     content: ".";     display: block;     height: 0;     visibility: hidden;  }  .clearfix:after {clear: both;}  .clearfix {zoom: 1;} /* IE < 8 */

其实只使用clearfix:after就可以达到清除浮动的效果,但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,所以为了让浏览器兼容这个clearfix的清除浮动,在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题。

在这么多种清除浮动的方法中,都没有离开最原始的clear:both方法,特别是clearfix:after清除浮动,完全就是clear:both的一种变身,区别在于不需要在html增加一个标签,而只需要在有浮动元素的父元素中加上一个clearfix的class名,这样就轻松解决了清除浮动的问题。


热点排行