为了梦想开始历练之清除浮动篇

前言

开篇

中篇

原因

解决方式

1额外标签得方法

2触发BFC overflow

3伪元素

4双伪元素

结尾

前言

师傅（路人甲）+小徒弟（路人乙）,自从路人乙昨晚没有被叫去摆地摊之后。早上一起床

路人甲:徒儿，昨晚休息得如何

路人乙:师傅，休息得不错。

路人甲:你去后山得秘境修炼一番，会遇到一些困难挫折

路人乙:好的师傅

开篇

说着就屁颠屁颠得来到了后山，守门得是一致巨兽(路人丙）

路人丙:你个小娃娃，要想从我这里过，需要回答一个问题

路人乙:你说，我保证能答得上

路人丙:清除浮动得常见方法有哪些，有什么优缺点

路人乙:这种问题有什么意义呢

路人丙:

清除浮动得原因

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

那么如何解决这个问题呢

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#container {border: 1px solid red;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}
</style><body><div id="container"><div id="tudi">徒弟</div><div id="jushou">巨兽</div></div><div id="shifu">师傅</div>
</body></html>

中篇

路人乙:第一种方式

额外加标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#container {border: 1px solid red;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
</style><body><div id="container"><div id="tudi">徒弟</div><div id="jushou">巨兽</div><div id="clear">我来帮你了</div></div><div id="shifu">师傅</div>
</body></html>

路人丙:还有其他得方式吗这种方式

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

路人乙:不是说好一种吗实现就可以了不是吗

路人丙:最起码三种以上不然别想通关

路人乙:第二种触发BFC规范

父级加overflow

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#container {border: 1px solid red;overflow: hidden;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
</style><body><div id="container"><div id="tudi">徒弟</div><div id="jushou">巨兽</div></div><div id="shifu">师傅</div>
</body></html>

路人丙:还有吗

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

路人乙:第三种

使用伪元素清除浮动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#container {border: 1px solid red;}.clear:after {/*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;height: 0;clear: both;visibility: hidden;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
</style><body><div id="container" class="clear"><div id="tudi">徒弟</div><div id="jushou">巨兽</div></div><div id="shifu">师傅</div>
</body></html>

路人丙:

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

看你天资聪颖，我再告知一种，你便可以过去了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#container {border: 1px solid red;}.clear:after,.clear:before {content: "";display: table;}.clear:after {clear: both;}#shifu {width: 100px;height: 100px;background-color: pink;}#tudi {width: 100px;height: 100px;background-color: blue;float: left;}#jushou {width: 1000px;height: 100px;background-color: whitesmoke;float: left;}#clear {clear: both;}
</style><body><div id="container" class="clear"><div id="tudi">徒弟</div><div id="jushou">巨兽</div></div><div id="shifu">师傅</div>
</body></html>