css中的滚动条以及清浮动

最新推荐文章于 2023-09-21 11:00:23 发布

Azikou

最新推荐文章于 2023-09-21 11:00:23 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/u011909890/article/details/10817493

版权

关于css的清浮动问题，很多时候当我们用了float：left或者right以后下个节点总是会出现在错误的位置。这时候我们要做的就是给前面运用float的父节点来清浮动。

当然清浮动有很多种方法，我这里所讲的是其中的.f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}

.f-cb{zoom:1;}。。。。f-cb是父节点的class命名，display：block讲节点显示为块状元素，最主要的就是clear：both了。接下去的height，overflow，content都是用来将这个节点给隐藏掉。。

下文有用到overflow：scroll，他的作用是给超出节点高度宽度的内容添加滚动条，从而使页面不至于乱糟糟，当然同样的还有overflow：auto和overflow：hidden。前者的作用和scroll一样只是他只有一个滚动条，scroll则是有两个。而hidden的作用却是将超出节点的部分隐藏掉，虽然看不到，但是其还是真实存在的。

下面是随文的练习代码，看客莫笑

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>NEC：更好的CSS方案</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
<style type="text/css">
.g-hd,.g-mn,.g-ft{background-color: red}
.g-hd{position:relative;float: left;margin-right: -200px;width: 200px}
.g-ft{float: right;margin-left: -200px;width: 200px}
.g-bd{margin: 0 210px 0 210px }
.g-mn{float: left;width: 100%}
.overflow{width:100px;height: 100px;overflow: scroll;float:left;margin-top: 20px}

.f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb{zoom:1;}
</style>
</head>
<body>

<div class="g-doc f-cb">
    <div class="g-hd">
          左侧定宽200px
    </div>
    <div class="g-bd">
        <div class="g-mn">
              中间自适应
        </div>
        
    </div>
    <div class="g-ft">
          右边定宽200px
    </div>
</div>

<div class="overflow">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>

Azikou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的滚动条以及清浮动

关于css的清浮动问题，很多时候当我们用了float：left或者right以后下个节点总是会出现在错误的位置。这时候我们要做的就是给前面运用float的父节点来清浮动。当然清浮动有很多种方法，我这里所讲的是其中的.f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".
复制链接

扫一扫