清除浮动的方法
2021-08-24 本文已影响0人
沃德麻鸭
1.额外标签法
给谁清除浮动就在谁的后面额外添加一个空白标签,给那个空白标签添加样式:style=‘clear:both’ / class='clear' ===>.clear{clear:both}
浮动元素
<div style='clear:both'></div> //方式一 行内样式
<div class=’clear‘></div> <style> .clear{ clear:both } </style> //方式二 两种做法一样
这里是通过在别的元素上清除浮动来实现撑开高度的,而不是在浮动元素上
2.父级添加 overflow:hidden
要注意是给父元素加(并不是所有的浮动都要加,谁影响布局才清除谁)
3.使用after伪元素
给父元素添加 clearfix , 由于IE6-7不支持:after,所以使用*zoom:1,触发hasLayout
.clearfix:after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;}
.clearfix{ *zoom:1 }
4.使用before和after双伪元素
给父元素添加 clearfix
.clearfix:before,.clearfix:after{
content:'';
display:table;}
.clearfix:after{
clear:both;}
.clearfix{
*zoom:1;}