使用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 |