清除(clear)浮动效果

释放双眼,带上耳机,听听看~!

为什么清除浮动?

  • 为了父元素不会出现“高度崩塌”
  • 如果强制规定外层容器的尺寸,则显得就不那么灵活了,高度就不能自动适应了
  • 从某个元素开始,不在需要浮动效果了

清除浮动效果

方法1,直接在对应容器中添加代码:

div {
    clear:both;
}

方法2,在有浮动元素的最后添加一个带有clear:both;属性的元素:

HTML插入:<div id="clearDiv"> </div>
CSS样式:#clearDiv{clear: both;}

方法3,目前比较流行的方法,用::after清除浮动:

要清除浮动的代码前面加一段代码,HTML插入:<div id="clearDiv"> </div>
CSS样式:
#clearDiv::after { /*在clearDiv结束的位置上添加一段内容*/
	content: "";/*留空,要让clearDiv有内容对象,但是是虚的存在,不做任何输出显示*/
	visibility: hidden;/*和content是一组的,两个互为补充,为了不让一些误操作让界面出现一些内容,所以这里将内容隐藏起来*/
	height: 0px; /*将行高恢复为0*/
	display: block;/*块状显示,content里面无论设置什么将content转换为块级元素*/
	clear: both;
}
#clearDiv {
	zoom: 1;属于IE浏览器里面专用的,它可以非常有效解决IE浏览器里各种其他的BUG,比如一些外编译重叠、浮动不能清除等等。原理:使页面重新加载,重新计算,重新渲染的效果
}

zoom: 1;属于IE浏览器里面专用的,它可以非常有效解决IE浏览器里各种其他的BUG,比如一些外编译重叠、浮动不能清除等等。原理:使页面重新加载,重新计算,重新渲染的效果

属性值

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

 

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索