当前位置: 移动技术网 > IT编程>网页制作>CSS > 前端清除浮动的几种方法

前端清除浮动的几种方法

2019年08月21日  | 移动技术网IT编程  | 我要评论
清除浮动方法 给父级定义height 缺点:扩展性不好 父级 overflow:hidden 定位 浮动 开启 浮动/定位盒子的特点高宽都由内容撑开 缺点:IE6会失效,添加样式 触发 (haslayout) br标签清除浮动 ``缺点:IE6不支持 空标签清除浮动 `` 缺点:违反了结构行为样式相 ...

清除浮动方法

  • 给父级定义height 缺点:扩展性不好
  • 父级 overflow:hidden 定位 浮动 开启bfc布局 浮动/定位盒子的特点高宽都由内容撑开 缺点:ie6会失效,添加样式zoom:1;触发拥有布局(haslayout)
  • br标签清除浮动 <br clear="all"/>缺点:ie6不支持
  • 空标签清除浮动 <div style="clear:both"></div> 缺点:违反了结构行为样式相分离的原则.

  • 伪类清除浮动
clear-fix:{
    *zoom:1; /*ie6 ie7不支持伪类元素  开启haslayout*/
}
clear-fix::after{
    content:'';
    display:block;
    clear:both;
}

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网