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

清除浮动

1，为何要清除浮动

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

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

2）现在想要三个div并排显示，则将3个div设置float:left;效果如下。
问题出现了：父元素container1 高度塌陷了。

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


强调：
1）正常情况下：div中如果有内容，它能被内容撑出高度，但如果其中的内容是浮动的，则撑不起高度了，其高度变为0。
2）在上述例子中，container1本来是被撑出了高度的，但由于给div1,2,3设置了浮动，因此其高度没有了，变为了0。

2，清除浮动的两大基本方式：

1，运用clear:both;
clear:both; 清除浮动。元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。
1） “内墙法”： 在浮动元素最后添加一个冗余元素，并为其设置clear:both;
代码如下图：

原理：
由于它左右两边不能有浮动元素，因此，它会跑到浮动元素下方，而container1父元
素需要包裹住#cl ，其高度就被撑开了。注：#cl div其高度为0；

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

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

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

• 通过content:“.”；生成内容作为最后一个元素。
• display:block; 使生成的元素以块级元素显示；
• height:0; 避免生成内容破坏原有布局的高度；
• visibility:hidden;使生成的内容不可见；
• zoom:1；触发 IE hasLayout。

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

更精简的写法：

附上content和after用法:

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

2，父元素BFC或haslayout
父元素设置` overflow: hidden;

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