float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

使用float会带来哪些影响：

• 脱标：无行级块级之分；
• 相互贴靠：若想之间有空隙可用margin与padding；
• 顶边对齐；
• 文字环绕；

当使用float后，子标签脱离父标签，父标签就会失去高度，此时光标上移，父标签下面的内容就会上升，影响布局，因此：

如何清除浮动带来的影响：

• 设高法；给父标签设置高度；
• clear：both；给不想受影响的标签设置；
• overflow：hidden；内墙法，隐藏超出部分，谁想浮动就给自己加一个overflow；
• clearfix；before 与after；

  这里注意：在内墙法中，如想给子标签与父标签之间有距离，就子标签中设置margin，父标签中设置overflow：hidden；

 clear fix中应有的内容：

content：“”；

display：block；

clear：both；

height：0；

visibility：hidden；

*zoom'1:为了兼容IE6、7

 

转载于:https://www.cnblogs.com/gengaiwei/p/6239389.html