search

博客列表 >实例演示如何消除子元素浮动造成父元素高度折叠的影响和三类布局的实现原理2019年9月5日1点

实例演示如何消除子元素浮动造成父元素高度折叠的影响和三类布局的实现原理2019年9月5日1点

月迎下弦的博客
月迎下弦的博客原创
2019年09月05日 01:13:12675浏览

子元素浮动造成父元素高度折叠的影响

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .wrap {
            width: 1000px;
            border: 3px solid red;
        }
        
        .box {
            width: 800px;
            background-color: lightslategray;
            height: 580px;
            float: left;
        }
        
        .up {
            width: 300px;
            height: 300px;
            background-color: cyan;
            float: left;
            opacity: 0.7;
        }
        
        .down {
            width: 200px;
            height: 400px;
            background-color: magenta;
            float: left;
        }
        
        .left {
            width: 500px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
        
        .right {
            width: 600px;
            height: 80px;
            background-color: khaki;
            float: left;
        }
        
        .box1 {
            clear: both;
            width: 500px;
            height: 100px;
            border: 2px solid blue;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="box">
            <div class="up">up</div>
            <div class="down">down</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>

    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

可以看到结果 元素浮动后脱离了文档流 ，所有的元素都挤到了一起，使父级元素的高度折叠，

解决办法，

  • 重新设置父级元素的高度；但是有一定的局限性，子元素有变动而父元素的高度都要相对改变，不可取

  • 所有父级元素跟随子元素一样浮动；如果有多个盒子嵌套，那么所有的盒子都要浮动，不可取

  • 在子元素的下面再次添加一个空子元素，使用“clear：both；”来清楚子元素浮动对父级的影响；此方法属于额外的添加元素，会增加后期的工作量，不推荐

  • 在父级添加“overflow: hidden;”来清除子元素浮动的影响；全球通用，推荐


  • 实例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .wrap {
            width: 1000px;
            border: 5px solid red;
            /* height: 600px; */
            /* float: left; */
            overflow: hidden;
        }
        
        .box {
            width: 800px;
            background-color: lightslategray;
            height: 580px;
            float: left;
        }
        
        .up {
            width: 300px;
            height: 300px;
            background-color: cyan;
            float: left;
            opacity: 0.7;
        }
        
        .down {
            width: 200px;
            height: 400px;
            background-color: magenta;
            float: left;
        }
        
        .left {
            width: 500px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
        
        .right {
            width: 600px;
            height: 80px;
            background-color: khaki;
            float: left;
        }
        
        .box1 {
            clear: both;
            width: 500px;
            height: 100px;
            border: 2px solid blue;
        }
        /* .clear {
            clear: both;
        } */
    </style>
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="box">子元素
            <div class="up">up</div>
            <div class="down">down</div>
            <div class="left">left</div>
            <div class="right">right</div>

        </div>
        <!-- <dir class="clear"></dir> -->

    </div>
</body>

</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


--------------------------------------------------------------------


三列布局的实现原理

  • 绝对定位

    以父级位参照实施决对定位


  • 实例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .container {
            width: 1100px;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            min-height: 40px;
            background-color: lightblue;
        }
        
        .body {
            position: relative;
            margin: 0 auto;
        }
        
        .left {
            width: 200px;
            min-height: 800px;
            background-color: rgb(168, 201, 212);
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .right {
            width: 240px;
            min-height: 800px;
            background-color: rgb(168, 201, 212);
            position: absolute;
            right: 0;
            top: 0;
        }
        
        .center {
            min-height: 800px;
            background-color: rgb(117, 123, 126);
            /* position: absolute; */
            margin-left: 200px;
            margin-right: 240px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="body">
            <div class="left">左侧</div>
            <div class="center">中间内容</div>
            <div class="right">右侧</div>
        </div>
        <div class="footer">底部</div>
    </div>

</body>

</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    浮动定位

  利用在父级元素上清浮动的效果来实现

  • 实例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .container {
            width: 1100px;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            min-height: 40px;
            background-color: lightblue;
        }
        
        .body {
            /* position: relative; */
            margin: 4px auto;
            overflow: hidden;
        }
        
        .left {
            width: 200px;
            min-height: 800px;
            background-color: rgb(168, 201, 212);
            /* position: absolute; */
            float: left;
            margin-right: 5px;
        }
        
        .right {
            width: 240px;
            min-height: 800px;
            background-color: rgb(168, 201, 212);
            /* position: absolute; */
            float: left;
            margin-left: 5px;
        }
        
        .center {
            min-height: 800px;
            background-color: rgb(117, 123, 126);
            /* position: absolute; */
            /* margin-left: 200px;
            margin-right: 240px; */
            float: left;
            width: 650px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="body">
            <div class="left">左侧</div>
            <div class="center">中间内容</div>
            <div class="right">右侧</div>
        </div>
        <div class="footer">底部</div>
    </div>

</body>

</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

总结：

浮动

一、文档流：html元素按书写顺序进行排列，从坐到右，从上到下，也加标准流

CSS两大功能：1：控制元素的外观；2：控制元素的位置（布局）

二、布局前提：浏览器交出页面布局的权限，交给用户，（将元素从文档流中脱离出来）

三、脱离文档流的手段：浮动，决定对位

四、浮动可以将元素在水平方向上自由移动，垂直方向不变

绝对定位：如果子元素没有父元素，那将对body定位，如果子元素上面有父元素，父元素设置relative，这时子元素将相对

父元素进行定位。

浮动定位：块元素如果不指定宽度的话，默认是100%，当div浮动起来宽度就会随着内容自适应，所有要给浮动的元素设定宽度，还要在父元素上使用overflow:hidden。

上一条：学习CSS布局原理与实现心得下一条：浅谈HTML 2019-8-30作业
子元素浮动，父元素高度折叠，三列布局，绝对定位，浮动定位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多