文档章节

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

o
 osc_a22drz29
发布于 2019/03/22 08:28
字数 519
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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://www.runoob.com/css/css-float.html

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

物联网开发服务开发虚拟设备需要几步?

云栖号快速入门:【点击查看更多云产品快速入门】 不知道怎么入门?这里分分钟解决新手入门等基础问题,可快速完成产品配置操作! 物联网平台设备的正常开发流程是:设备端开发完成,设备上报...

osc_2axit9df
37分钟前
18
0
互联网互联网必看文章墙裂推荐

后端必看文章系列 大型项目架构演进过程及思考的点

code-ortaerc
38分钟前
20
0
ACL2020论文整理 - 知乎

ACL2020录取文章已经放出,链接如下: ACL2020论文集合 www.aclweb.org 为了以后更加方便地阅读论文,也本着一颗开源之心,花一个下午的时间整理了一下相关论文。鉴于本人精力有限,并且也只...

osc_5w65ebjo
39分钟前
10
0
SU(N) Hubbard 模型平均场

osc_31d5oo2i
41分钟前
18
0
Python语言及其应用PDF高清完整版百度云盘免费下载|python基础教程PDF电子书推荐

编辑推荐 本书内容易于理解,而且读起来生动有趣,是编程和Python初学者不可多得的教程。书中首先介绍了Python的基础知识,然后逐渐深入多种主题,结合教程和攻略式风格来讲解Python 3中的概...

osc_nbg2lo7i
41分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部