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. 布局总结
网页布局中，行内元素 尤其是行内块元素，在布局上，无论垂直还是水平都容易操作。
块元素布局上需要采取对应策略：
竖向排列使用：标准流
横向排列使用：浮动
叠加排列使用：定位
（定位将在后面课程中讲解体现）
