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

• 优点：比空标签方式语义稍强，代码量较少；
• 缺点：结构与表现未分离。