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标签清浮动

优点：比空标签方式语义稍强，代码量较少；

缺点：结构与表现未分离。