(前端)html与css css 18、清除浮动，溢出隐藏

清除浮动

1、浮动存在的问题

a) 浮动的元素不能撑高父级，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            border: 10px solid #999;
        }
        .box div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
View Code

效果图↓

元素脱离标准流之后，不能再撑高他的父级盒子。

b) 浮动会影响后面浮动的元素，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            border: 10px solid #999;
        }
        .box div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
View Code

我又加了一个box，正常想到的效果图↓

实际效果图↓

如果后面的元素浮动方向相同，他会去贴上一个浮动最后一个 元素的边。

2、清除浮动方法

a) 给父盒子添加高度

给父级元素增加高度，它内部的浮动元素被限制了范围，不会影响后面的元素浮动，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            height: 150px;
            border: 10px solid #999;
        }
        .box div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
View Code

效果图↓

效果：解决了父级高度的问题，解决了浮动影响后面浮动的问题。

存在的问题：高度还是不能自适应。

b) 清除浮动属性clear

元素都可以设置一个clear的属性，用来清除浮动的作用。

属性值：left、right、both(两边)

作用：clear整体表示清除自身受到的其他元素带来的浮动的影响。

left：清除受到左浮动的影响。

right：清除受到右浮动的影响。

both：清除受到左右两个方向浮动的影响。

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px; 
            border: 10px solid #999;
        }
        .box1{
            clear: left;
        }
        .box div,.box1 div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
View Code

效果图↓

解决：浮动的互相影响。

存在的问题：父盒子还是不能被子盒子撑高，margin如果小于中间浮动的子元素的高度，margin显示效果失效，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px; 
            border: 10px solid #999;
                        /*这里设置了一个margin的属性 20px*/
            margin-bottom: 20px;
        }
        .box1{
            clear: left;
        }
        .box div,.box1 div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
View Code

效果图及控制台图解↓

  发现并没有变化。

c) 隔墙法

隔墙法：在互相影响的元素中间加一道墙，阻隔开两边的元素，墙上面加一个clear属性。

外墙法：

在有浮动元素的父盒子之间隔一道墙，添加两个类，一个清除浮动，一个模拟外边距，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px; 
            border: 10px solid #999;
            margin-bottom: 20px;
        }
        .box div,.box1 div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
        .cl{
            clear: both;
        }
        .he{
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="cl he"></div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
View Code

解释：在class名为box和box1的盒子之前在加一个名为cl 和he 的盒子，就将cl这个盒子看成一道墙，然后单独给这道墙单独设置clear属性和height属性，在这里的height是模拟间距的效果，效果图↓

解决：浮动的互相影响。

存在的问题：高度自适应，margin失效。

内墙法：

将清除浮动的墙放在有浮动元素的父盒子内部的最后，只要有浮动就在盒子内部加一道墙，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px; 
            border: 10px solid #999;
            margin-bottom: 20px;
        }
        .box .fl,.box1 .fl{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="cl"></div>
    </div>
    <div class="box1">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="cl"></div>
    </div>
</body>
</html>
View Code

解释：在父盒子内部的最后添加了名为cl的盒子，然后cl单独设置clear属性。

效果图↓

解决：浮动互相影响，高度自适应，margin失效。

缺点：①html结构布局，很多需要浮动，每个浮动的盒子内都需要隔一堵墙，页面结构复杂，会出现很多没有意义的标签。

②一个盒子内的元素要浮动就都浮动，浮动后面的墙是一个标准流里的元素。

三、overflow: hidden

盒子内部的元素可以设置溢出模式，隐藏，自动显示。

overflow：溢出。

属性值：hidden溢出隐藏，auto溢出滚动。

溢出隐藏（多出的内容隐藏）：代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 400px;
            padding: 5px;
            margin: 100px auto;
            border: 1px solid red;
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 26px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>2013年2月，在江苏卫视春晚与师父赵本山合作小品《有钱了》，在辽宁卫视春晚与王小利合作小品《第一场雪》，在吉林卫视春晚与张可 、小超越合作小品《大考当前》。同年3月，主演农村家庭剧《收获的季节》，在剧中饰演金翰林。同年9月，参演民国传奇剧《老兵》。同年9月，与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》，在剧中饰演周六福,同年10月7日，参加第十届华鼎奖，获最受中国媒体欢迎的演员 同年12月，参演阚卫平执导的当代乡村情感喜剧《爹妈满院》，在剧中饰演张万泉。2017年，在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月，在北京卫视春晚小品《回家》中，他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型。同年2月，在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月，参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚，自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段。10月，担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长
        </p>
    </div>
</body>
</html>
View Code

效果图↓

可以看到黄圈里的文字溢了出来，需要加个溢出隐藏属性，代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 400px;
            padding: 5px;
            margin: 100px auto;
            border: 1px solid red;
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 26px;
            /*溢出隐藏*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>2013年2月，在江苏卫视春晚与师父赵本山合作小品《有钱了》，在辽宁卫视春晚与王小利合作小品《第一场雪》，在吉林卫视春晚与张可 、小超越合作小品《大考当前》。同年3月，主演农村家庭剧《收获的季节》，在剧中饰演金翰林。同年9月，参演民国传奇剧《老兵》。同年9月，与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》，在剧中饰演周六福,同年10月7日，参加第十届华鼎奖，获最受中国媒体欢迎的演员 同年12月，参演阚卫平执导的当代乡村情感喜剧《爹妈满院》，在剧中饰演张万泉。2017年，在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月，在北京卫视春晚小品《回家》中，他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型。同年2月，在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月，参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚，自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段。10月，担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长
        </p>
    </div>
</body>
</html>
View Code

效果图↓

溢出滚动（多出的内容出现滚动条）: 代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 400px;
            padding: 5px;
            margin: 100px auto;
            border: 1px solid red;
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 26px;
            /*溢出滚动*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>2013年2月，在江苏卫视春晚与师父赵本山合作小品《有钱了》，在辽宁卫视春晚与王小利合作小品《第一场雪》，在吉林卫视春晚与张可 、小超越合作小品《大考当前》。同年3月，主演农村家庭剧《收获的季节》，在剧中饰演金翰林。同年9月，参演民国传奇剧《老兵》。同年9月，与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》，在剧中饰演周六福,同年10月7日，参加第十届华鼎奖，获最受中国媒体欢迎的演员 同年12月，参演阚卫平执导的当代乡村情感喜剧《爹妈满院》，在剧中饰演张万泉。2017年，在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月，在北京卫视春晚小品《回家》中，他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型。同年2月，在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月，参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚，自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段。10月，担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长
        </p>
    </div>
</body>
</html>
View Code

效果图↓

可以看出来有个滚动条的效果。

overflow其他功能：能清除盒子内部元素的浮动影响

未添加overflow：hidden代码及效果图↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px; 
            border: 10px solid #999;
            margin-bottom: 20px;
        }
        .box .fl,.box1 .fl{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
    </div>
    <div class="box1">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
    </div>
</body>
</html>
View Code

添加后代码及效果图↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px; 
            border: 10px solid #999;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .box .fl,.box1 .fl{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
    </div>
    <div class="box1">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
    </div>
</body>
</html>
View Code

解决：浮动互相影响，高度自适应，margin失效。

优势：能够解决所有问题，不会增加无用的标签。

overflow：hidden加载机制：

高度自适应：如果元素有溢出隐藏的属性，网页加载时，会强制的去元素内部搜索，识别所有内部元素高度，会把最高元素的高度配给父盒子自适应高度。

浮动影响：加载时，如果有溢出隐藏，强制检索，看盒子内部是否有浮动元素，如果有会被整体管理起来，在自身的高度内不会影响其他的浮动元素。

如果遇到大的结构，会在结构之间加一堵外墙。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/StevenSunYiwen/p/11254390.html