css清除浮动方法

浮动的产生会带来哪些问题,大家看一下例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .diva,.divb{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <div class="diva">diva</div>
        <div class="divb">divb</div>
    </div>
</body>
</html>

二个子div左浮动脱离了文档流,导致父div塌陷,我们可以定义一个clear:both样式,然后在子div的末尾加上一个div引用clear:both样式,不过这样html结构代码量就会增多,大家可以了解一下这种清楚浮动的方法,但是久伴不推荐使用这种方案,大家可以使用:after 伪元素来清楚浮动,代码如下

.clearfix:after {
  content: "\00A0";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.clearfix {
  zoom: 1;
}

以上代码请在浮动的父元素上面引用即可

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA赞助
共{{data.count}}人
人已赞助
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索