【零基础入门】css学习笔记（6）清除浮动-白红宇

【零基础入门】css学习笔记（6）清除浮动

阅读量：6496 次

发布时间：2019-06-24

本文共 1152 字，大约阅读时间需要 3 分钟。

清除浮动

浮动效果会带来不好的影响： 子元素浮动会带来父元素高度塌陷。

具体解释：

当浮动框高度超出包含框时，包含框不会自动伸高来闭合浮动元素，会出现“高度塌陷”现象。正是因为浮动的这种特性，导致本属于普通流中的元素浮动后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0，在实际布局中，这并不是我们所希望的，所以需要闭合浮动元素，使包含框表现出正常的高度。

举例说明：

1）下图所示：普通流中，父元素container1高度为 3个div撑起的高度。

2）现在想要三个div并排显示，则将3个div设置float:left;效果如下。

问题出现了：父元素container1 高度塌陷了。

3）父元素container1高度塌陷，则其下方的元素会跑上来。

强调：

1）正常情况下：div中如果有内容，它能被内容撑出高度，但如果其中的内容是浮动的，则撑不起高度了，其高度变为0。

2）在上述例子中，container1本来是被撑出了高度的，但由于给div1,2,3设置了浮动，因此其高度没有了，变为了0。

1，运用clear:both;

clear:both; 清除浮动。元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。

1） “内墙法”：在浮动元素最后添加一个冗余元素，并为其设置clear:both;

代码如下图：

原理：

由于它左右两边不能有浮动元素，因此，它会跑到浮动元素下方，而container1父元

素需要包裹住#cl ，其高度就被撑开了。注：#cl div其高度为0；

缺点：要在页面中添加没有意义的冗余元素，比较麻烦，而且不符合语义化。

2）clearfix:after 伪元素方法：给父元素添加一个clear类，既方便又符合语义化。

图片描述

原理: 为了减少写一个无意义的div 元素，在clearfix 内容后面使用after添加一个content充当“元素”。

除了clear:both;是用来清除浮动的，其它代码都是为了隐藏掉content生成的内容。

更精简的写法：

附上content和after用法:

after用法举例：在container1尾部添加1个content，页面效果如下图所示。

2，父元素BFC或haslayout

父元素设置` overflow: hidden;

BFC相关知识还未完全理解，理解后再详细写。

转载地址：http://aauyo.baihongyu.com/

你可能感兴趣的文章