CSS中清除浮动的作用以及如何清除浮动

1.什么是浮动,浮动的作用
“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。
例如.
未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)中。
图1
这里写图片描述
给承载图片的元素设置浮动后,如下图2显示
这里写图片描述
图2
注:图1未设置父级元素高度。图2设置了父级元素的高度。

2.为什么要清除浮动

未设置浮动时显示图1效果。
当父级元素设置的高度小于子级元素(子级浮动)的高度时会出现如下图3显示结果。此时设置了浮动的子元素已经脱离了标准流,换句话说就是子元素浮动在父级元素之上了。
这里写图片描述
如果在块级元素(橙色)下方添加一个兄弟块级,两个浮动的图片也会浮动在它父级元素的兄弟元素上方。
这里写图片描述
如果父级元素只加宽度不加高度,则父级元素不会显示(橙色区),随后设置的兄弟元素会替代前一个元素。
我们想要达到的目的是子元素在父级元素内浮动并且父级元素在未设置高度的时候能够显示。所以就要清楚浮动了。
这里写图片描述

3.如何清除浮动
方法一,给浮动元素添加一个兄弟元素,兄弟元素的CSS设置clear:both;。
方法二,给浮动元素的父级元素的CSS添加overflow: auto; zoom: 1; //zoom: 1; 触发IE hasLayout。
方法三,
.outer {zoom:1;} .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibili ty:hidden;}

关注公众号回复“资料”即可获得精心为您准备的前端学习视频资料
更多信息请转度娘。我的新浪博客地址(http://blog.sina.com.cn/u/2978921467)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值