标签:清除 width 部分 overflow 设置 type oat doctype lan
1、当父元素设置了height值时,则设置overflow:hidden后,子元素超出父元素部分隐藏
2、当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。
作用1示例:
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1{
                width: 500px;
                border: 1px solid red;
                height: 50px;
                overflow: hidden;
            }
            #div2{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
    </body>
</html>
作用2示例:
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1{
                width: 500px;
                border: 1px solid red;
                overflow: hidden;
            }
            #div2{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
    </body>
</html>
标签:清除 width 部分 overflow 设置 type oat doctype lan
原文地址:https://www.cnblogs.com/jayfeng/p/12149208.html