注册/登录,欢迎光临!
加入收藏设为首页网站地图
您当前的位置:辛勤IT网 >> 网页设计 >> DIV+CSS >> css如何清除浮动
热门:word | excel | powerpoint

css如何清除浮动

2022/4/15 12:29:58 所属分类:网页设计 - DIV+CSS
内容提要:css如何清除浮动,在我们写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示。

  在我们写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示。

  但使用float浮动元素后,会有一些不好的影响:

  (1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素。

  (2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置。

  (3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示。

  这个时候就需要清除浮动了,下面介绍一些css清除浮动的方法。

  (1)使用clear:both清除浮动

  在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护。

  <div style="clear: both"></div>

  (2)利用伪元素clearfix来清除浮动

  给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的。

.clearfix:after{

    content:"";

    display:block;

    visibility:hidden;

    clear:both;

    }

  (3)使用CSS的overflow属性

  当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了,它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果。

.box{

border:1px solid #ccc;

background:#eff2f4;

overflow: auto

}

网页设计 | DIV+CSS
相关文章
最近更新
推荐信息
关于我们 | 联系方式 | 对话本站 | 版权声明 | 所有信息