css中的滚动条以及清浮动

来源：互联网发布：java判断文件是否存在编辑：程序博客网时间：2024/05/30 07:13

关于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>