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

前言

开篇

中篇

原因

解决方式

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>

结尾

路人乙听完，路人乙匆匆离开了

我是歌谣该问题取自面经欢迎一起讨论交流一个沉迷于故事得讲述者。

为了梦想开始历练之清除浮动篇相关推荐

css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
“约见”面试官系列之常见面试题之第五十五篇之清除浮动的方法（建议收藏）
清除浮动的几种方法标准流:盒子会各占整行位置.子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度. 浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒子高 ...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS ...
html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
IE Mobie6清除浮动
看来已经有很多中window的毒了,平时操作系统是window,现在还好多人用window mobie,看来已经习惯了window的使用方式.做前端开发,有个IE 6已经够受的了,没想到半路杀出个IE ...
div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
CSS清除浮动的五种常用方法
清除浮动是每一个 web前台设计师必须掌握的技能.浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width.height 属性.以下面的场景为例,给大家展示一下不清除浮动引 ...
深入理解：overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
【荐】万能清除浮动样式
这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用. 这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器. ...

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

为了梦想开始历练之清除浮动篇相关推荐

最新文章

热门文章