码迷,mamicode.com
首页 > Web开发 > 详细

关于CSS清除浮动的几种方法

时间:2016-05-30 21:24:35      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

如果一个父元素的所有子元素都设置了float效果,则该父元素的高度不会被撑开且颜色也不会显示。这是因为子元素设置float效果后脱离了标准的文档流,

不占据文档空间所以不能把父元素撑开。有时为了解决这个问题可以使用下面几种方法来清除浮动效果。

方法一:使用空标签

该方法就是在子元素后再添加一个空标签,空标签可以是<div>也可以是<p>等,但是要设置样式clear : both ;这样就可以达到清除浮动的效果。

方法二:给父元素设置overflow: auto;

该方法是给父元素设置样式 overflow: auto; 也可以设置为 overflow: hidden,但 overflow: visible不可以。

方法三:使用:after伪元素

该方法是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于第一种方法,区别在于前者是在html插入了一

个空的div.clear标签,而该方法是利用其伪元素:after在元素内部增加一个类似于空div的效果。下面来看看其具体的使用方法:

.outer :after {clear:both;content:‘.‘;display:block;width: 0;height: 0;visibility:hidden;}

关于CSS清除浮动的几种方法

标签:

原文地址:http://www.cnblogs.com/csulym/p/5543796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!