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;
}

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

人已赞赏
HTML+CSS

only-child与only-of-type结构类

2019-9-22 16:35:44

HTML+CSS

css自定义鼠标滑动选中文本背景色及文字颜色

2020-3-17 14:28:45

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