CSS 的overflow:hidden; 、clear:both;属性详细解释

最新推荐文章于 2021-10-12 08:53:39 发布

Jobs1127c

最新推荐文章于 2021-10-12 08:53:39 发布

阅读量970

点赞数 2

分类专栏：第一部分java基础学习文章标签： css

本文链接：https://blog.csdn.net/jobs1127c/article/details/53508881

版权

第一部分java基础学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

overflow:hidden;clear:both;测试下面代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<meta http-equiv="description" content="全泰消化专家管理系统">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系统</title>
<style type="text/css">
* {
    margin: 0px;
    border: 0px;
}

.sss {
    width: expression(document.body.clientWidth); document .body.clientWidth
    > 900 ? "100%" : "1300px";
    width: 100%;
}
</style>

<style type="text/css">
html {
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
}
</style>
<style type="text/css">
#box {
    width: 500px;
    background: #000;
    height: 500px;
}

#content {
    float: left;
    width: 600px;
    height: 600px;
    background: red;
}
</style>
<style>
.keepbj { 
    width: 600px;
    height: 50px;
    border: 1px solid #f00;
}

#div1 {
    float: left;
    width: 130px;
    height: 50px;
}
#div2 {
    float: left;
    width: 130px;
    height: 50px;
}
#div3 {
    clear:both;
    width: 130px;
    height: 30px;
}
</style>
</head>

<body>
    <!-- box的长宽都小于content的，这样：显示则被content撑开width:600px; height:600px;  
    <div id="box">
        <div id="content">
        </div>
    </div>
    -->

    <!-- box的长宽都小于content的，加上overflow:hidden，溢出部分隐藏，这样：显示则为box的width:500px; height:500px;   
    <div id="box" style="overflow:hidden;">
        <div id="content"></div>
    </div>
    -->

    <div class='keepbj'>
        <div id='div1'>我会在左边</div>
        <div id='div2'>我会在右边</div>
    </div>
        <div id='div3'>我不会受flaot的影响。</div>
</body>
</html>

给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义。

clear:both;在css中，首先我们理解一下clear，顾名思义就是清除的意思，both的意思是全部，那连起来就是清除全部样式，不过这个样式主要是用于对多个div浮动的清除，如float:left,如果不清除，很容易对下面的div造成显示错位。

Jobs1127c

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的overflow:hidden; 、clear:both;属性详细解释

overflow:hidden;clear:both;测试下面代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><m
复制链接

扫一扫

专栏目录