最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

清除浮动float的方法总结

来源:动视网 责编:小采 时间:2020-11-27 18:52:26
文档

清除浮动float的方法总结

清除浮动float的方法总结:抛弃那些没用的方法,只记住最实用的一种方法即可!给要清除浮动的父元素多加一个class属性:clearfix。样式如下:.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:h
推荐度:
导读清除浮动float的方法总结:抛弃那些没用的方法,只记住最实用的一种方法即可!给要清除浮动的父元素多加一个class属性:clearfix。样式如下:.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:h


抛弃那些没用的方法,只记住最实用的一种方法即可!

给要清除浮动的父元素多加一个class属性:clearfix!!!

样式如下:

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;

}

为了兼容ie6,ie7(现在的项目几乎已经完全不考虑)

.clearfix{

zoom:1

}

清除浮动就是这么简单,可以作为公共样式common.css,每个页面都可以直接调用!

简单的实例应用:

<div class="clearfix">

  <div style="float:left">

    //sth

  </div>

  <div style="float:right">

    //sth

  </div>

</div>

为什么要清除浮动:

1.之前写的时候都会发现页面写着写着就发生错乱,而且还有重叠?就是浮动惹的祸!

2.父级元素下面的子元素float时,可能会导致父级height值为0;故在使用了float之后,立即在父级上面加上clearfix,彻底消除float带来的各种怪异问题!

文档

清除浮动float的方法总结

清除浮动float的方法总结:抛弃那些没用的方法,只记住最实用的一种方法即可!给要清除浮动的父元素多加一个class属性:clearfix。样式如下:.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:h
推荐度:
标签: 方法 清除 总结
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top