4. 清除浮动

4.1 准备代码

4.2 引言

通常情况下，未设置高度的 标准流父元素，在子元素进行浮动时，会导致父元素失去子元素，高度消失。进而影响页面排版。

该问题的解决方案有多种，常见两种快速解决方案：

1、 父元素也设置浮动（可能会影响其他垂直排版）

2、 清除子元素的浮动效果，让浮动状态的子元素影响标准流

注：有同学可能会使用 float:none;或者 删除 float 代码，这确实可以清除浮动效果。除此之外，在开发中，我们还有多种规范化的清除浮动的代码，下面让我们来一起学习。

4.3 概念&格式

清除浮动：清除兄弟元素带来的浮动影响。

格式：clear:属性值;

准备代码：

默认效果：

常见属性值：（为绿色块设置清除浮动）

 注意：clear 不会清除元素自身的浮动状态，仅会清除该元素左侧或右侧的浮动效果。

总结：一般我们使用 clear:both；这样就不用再区分我们是 左浮动还是右浮动，直接清空两端浮动效果。

问题引出：

单一使用 clear：both 虽然能清除元素左右的浮动效果，但是仍然无法解决

所以下面我们来介绍一些结合了 clear:both 的综合方式来解决以上问题。

4.4 额外标签法 (隔墙法)

额外标签法：通过添加一个 clear 样式的额外标签来清除浮动效果。

一般在父元素末尾添加一个空标签： < div style =" clear : both" ></ div >

注意：一般使用块级元素 div ， p 标签也能达到对应效果

示例代码：

示例效果：

分析：

注意：

浮动元素仍然是浮动状态 ，仅因为额外标签，使得影子在额外标签的父元素中生效。

浮动元素仅有一个“影子”，

“影子”仅被生效一次 。（多次添加额外标签，作用于某个浮动元素，该浮动元素的“影子”也仅生效一次）

总结：额外标签法在开发中会遇到

4.5 单伪元素法

单伪元素法：为标准流的父元素添加伪元素:after，利用:after 模拟生成额外标签，来清除浮动。

（是额外标签法的另一种写法）

语法：

示例代码：

示例效果及分析：

总结：用法较额外标签法复杂，而且要照顾低版本浏览器。

但因为不会添加额外标签，很多美工人员用伪元素可以应对需求反复的修改，所以会见到其他人的代码中使用

扩展：特殊条件下，当伪元素生成的内容有高度、且内容被显示影响版式时，我们会多加入两个属性：

语法：

visibility : hidden ; 隐藏元素，但是需要在页面占用位置。

（相当于有一个披了隐身衣的隐身人，占着地方，却看不见他）

一般用不上，因为伪元素 :after 在 content 为空时，默认生成的就是高度为 0 ，看不见的元素。

4.6 双伪元素法

双伪元素法：为标准流的父元素添加伪元素 :before 和 :after ，利用 :before 和 :after 模拟生成额外标签，来清除浮动。

（是额外标签法的另一种写法）

语法：

示例代码：

示例效果及分析：

总结：用法较额外标签法和单伪元素法更复杂，而且要照顾低版本浏览器。但会见到其他人的代码中使用,但因为不会添加额外标签，很多美工人员用伪元素可以应对需求反复的修改，所以会见到其他人的代码中使用

4.7 overflow:超出隐藏法

overflow: 用于设置溢出元素部分的策略。（兼顾清除浮动的妙用）

格式： overflow : 属性值 ;

属性值列表（后面课程会详细介绍其他属性值）

总结：清除浮动的代码虽然简洁，但是容易被上方的浮动元素影响，且无法显示出溢出部分，若对

内容不溢出 没有十足把握，不建议用此来清除浮动。

4.8 总结

未设置高度的 标准流父元素，在子元素进行浮动时，会导致父元素失去子元素，高度消失。这时我们可以采取清除浮动来让布局可控。

5. 布局总结

网页布局中，行内元素 尤其是行内块元素，在布局上，无论垂直还是水平都容易操作。

块元素布局上需要采取对应策略：

竖向排列使用：标准流

横向排列使用：浮动

叠加排列使用：定位

（定位将在后面课程中讲解体现）