CSS 什么时候需要清除浮动? 怎么清除浮动? 下面本篇文章就来给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
当父元素没有设置宽度或者高度的时, 又需要子元素撑开父元素的时候需要清除浮动.
其实浮动 float 最开始出现的意义只是为了让文字环绕图片而已. 但人们发现, 如果想要三个块级元素并排显示, 都给它们加个 float 来得会比较方便. 但这样做也会带来问题......
我们希望看到这样的效果:
但结果却是这样:
这个时候, 我们就要清除浮动带来的影响 -- 父元素高度塌陷了.
这里引用张鑫旭大神观点:
撇开浮动的 "破坏性", 浮动就是个带有方位的 display:inline-block 属性.
一目了然: 如果我们给上面的三个绿颜色的方块设置 display:inline-block 也能达到让它们并排显示的效果. 并且父元素的高度也不会塌陷. 只不过无法控制是居左还是居右, display:inline-block 只能从左往右.
如何清除浮动
我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响.
1, 为父元素设置高度
为父元素定高, 简单粗暴, 坏处不用多说吧, 没有人会这么干的..._
2, 在父元素的最后设置 clear:both
- <div class="p">
- <div class="c"></div>
- <div class="c"></div>
- <div class="c"></div>
- <div style="clear:left;"></div> <!-- 冗余的子元素 -->
- </div>
当添加了最后一个冗余元素 (未设置 clear:both) 时; 父元素和此冗余元素的高度都为 0, 并且三个浮动的元素都浮在了它们的上方盖住了它们(可以把它们看成 PS 中的图层). 现在, 给这个冗余元素添加 clear:both, 它便要躲开这三个浮动元素, 因此, 一直往下跑, 直到没有被浮动元素盖住才停下来. 而父元素看到这个子元素跑开了, 自然想要包裹住它.
这样就能看到我们想要的结果了 -- 父元素高度被撑开了.
貌似不错, 不过似乎有点问题 -- 我们有必要在页面中添加这么多没有意义的冗余元素吗? 显然这样太麻烦, 而且不符合语义化.
还好有伪元素, 这里我们使用::after. 添加一个类 fix:
- .fix::after {
- content:".";
- display:block;
- height:0;
- visibility:hidden;
- clear:both;
- }
在我们需要清除浮动时, 只需要给父元素追加 fix 类就能达到清除浮动的效果, 既方便又符合语义化.
- <div class="p fix">
- <div class="c"></div>
- <div class="c"></div>
- <div class="c"></div>
- </div>
当然, 大神的 fix 类这么写:
- .fix::after {
- content:"";
- display:table;
- clear:both;
- }
3, 给父元素添加 overflow:hidden
这里有必要了解一下 BFC 块级格式化上下文, 只说结论:
创建了 BFC 的元素就是一个独立的盒子, 不过只有 Block-level box 可以参与创建 BFC, 它规定了内部的 Block-level Box 如何布局, 并且与这个独立盒子里的布局不受外部影响, 当然它也不会影响到外面的元素. 它具有以下特征:
内部的 Box 会在垂直方向, 从顶部开始一个接一个地放置.
Box 垂直方向的距离由 margin 决定. 属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加.
每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化, 否则相反). 即使存在浮动也是如此.
BFC 的区域不会与 float box 叠加.
BFC 就是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素, 反之亦然.
计算 BFC 的高度时, 浮动元素也参与计算.
看到第六条, 如获至宝. 只需给父元素创建块级格式化上下文, 就可以让浮动的元素参与高度计算, 这样一来, 父元素的高度就有了.
不单单只有给父元素添加 overflow:hidden 才可以创建块级格式化上下文, 下列方法都可以:
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell,html 表格单元格默认属性)
表格标题 (元素的 display: table-caption,HTML 表格标题默认属性)
overflow 的值不为 visible 的元素
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
用 overflow:hidden 较多的原因是不会带来其它的布局问题.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18069.html