码迷,mamicode.com
首页 > Web开发 > 详细

CSS清除浮动

时间:2020-02-29 00:28:39      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:color   浮动   for   方式   dde   hidden   tab   str   auto   

清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 塌陷的问题。

清除浮动的方法

在CSS中,clear属性用于清除浮动,其基本语法格式如下:

选择器{clear:both;}

额外标签法

通过在浮动元素末尾添加一个空的标签(块级元素)例如

<div style=”clear:both”></div>,或则其他标签br等亦可。

父级添加overflow属性方法

可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。

使用after伪元素清除浮动(常用)

:after方式为空格元素的升级版,好处是不用单独加标签了
在需要清除浮动的元素中加类名.clearfix使用伪元素来清除浮动
使用方法:

  .clearfix:after {  
   content: "";
   display: block;
   height: 0;
    /* 隐藏元素  */
   visibility: hidden;
   /* 清除浮动 */
   clear: both;
    }   
    /* 兼容低版本ie浏览器 */
 .clearfix {*zoom: 1;}  

使用before和after双伪元素清除浮动

使用方法:

.clearfix:before,
.clearfix:after {
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

CSS清除浮动

标签:color   浮动   for   方式   dde   hidden   tab   str   auto   

原文地址:https://www.cnblogs.com/wenyongjie/p/12380997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!