本文主要是介绍Web前端基础（五）：清浮动方法与优缺点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、如何对待美工
- 对于靠谱美工，美工图精确度约0px。
- 对于不靠谱的美工，要与产品经理沟通，并用邮件往来。
2、浮动对文档的影响
- 浮动会导致当前元素脱离文档流，此时会对父级产生影响；
- 子元素浮动，父级元素会出现高度为0的现象，这个现象叫做高度塌陷；
3、清浮动的方法：
3.1 需要清浮动的情况：
- 子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；
- 新加入的标签，希望不受之前浮动元素的影响，则需要清浮动；
3.2 清浮动方法：
- 1、子元素浮动，父级元素也浮动；
- 2、给空标签设置属性clear: both;
不允许有浮动；例：
放在要清除的最末尾； - 3、br标签清浮动
为br标签设置属性——clear=”all” 即可 - 4、给父级标签设置 overflow: hidden/ auto ;
- hidden：超出内容隐藏。
- auto：默认属性，在需要时剪切内容并添加滚动条；超出时显示滚动条。
- 5、after伪元素清浮动
原理：替代空标签，相当于用一个高度宽度为0的块代替空标签
例：
4、清浮动方法优缺点辨析
4.1 子元素浮动，父级元素也浮动
- 优点：不存在结构和语义化问题，代码量少；
- 缺点：使得与父元素相邻的元素的布局会受到影响。
4.2 空标签设置属性clear: both
- 优点：通俗易懂，容易掌握；
- 缺点：会添加大量无语义空标签，结构与表现未分离，不利于维护。
4.3 给父级标签设置 overflow: hidden/ auto
- 优点：不存在结构和语义化问题；
- 缺点：
- hidden——>内容增多时候容易造成不会自动换行，导致内容被隐藏，无法显示需要溢出的元素。
- auto——>多个嵌套后，有些情形下会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块的滚动条。
4.4 after伪元素清浮动
- 优点：结构和语义化完全正确；
- 缺点：复用方式不当会造成代码量增加。
4.5 br标签清浮动
- 优点：比空标签方式语义稍强，代码量较少；
- 缺点：结构与表现未分离。
这篇关于Web前端基础（五）：清浮动方法与优缺点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
