文档流和脱离文档流

最新推荐文章于 2022-10-16 19:32:08 发布

pqxpq

最新推荐文章于 2022-10-16 19:32:08 发布

阅读量135

点赞数

分类专栏：转前端(html+css+js) 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_52563729/article/details/127192102

版权

转前端(html+css+js) 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文档流是文档中可显示对象在排列时所占的的位置/空间 <br>
    例如:快元素自上而下摆放,内联元素从左到右摆放,标准流很多限制 <br>

    <p style="color:red">标准流出现的问题</p>
    <ul>
        <li>高矮不齐,底边不齐</li>
        <li>无论多少个空格,换行都会被折叠为一个空格</li>
        <li>想让img标签之间没有空袭,必须紧密连接</li>
    </ul>
</body>
</html>

脱离文档流-同时产生浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .conter{
            width: 700px;
            height: 200px;
            border: 1px solid rebeccapurple;
        }
        div{
            width: 300px;
            height: 300px;
            float: left;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color:rebeccapurple;
        }
        .box3{
            background-color:royalblue;
        }

        ul>li{
            margin: 40px;
            float: left;
        }
    </style>
</head>
<body>

    <div class="conter">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <ul>
        <li> <a href="#">导航1</a> </li>
        <li> <a href="#">导航2</a></li>
        <li> <a href="#">导航3</a></li>
        <li> <a href="#">导航4</a></li>
    </ul>


    <p>浮动的时候当横向摆放元素宽度不够的时候会摆在下一行</p>
</body>
</html>

浮动产生的问题
1.浮动元素会造成父级元素的高度塌陷,第一层容器高度不设定的话就是0！！！！！！！！！！！
2.后续元素会受到影响

解决办法:

 清除浮动
        1.clear:left清除左浮动，right清除右边浮动

        2.使用overflow清除浮动,如果又服既元素塌陷，并且同级元素也受到了影响
        可以使用overflow清除浮动。这种情况下，父级元素不能设置高度。
        overflow:hidden并且同时增加clear:both(使用率比较高)

        3.伪对象,如果有父级元素塌陷可以给父标签
        增加content设置为空，同时clear:both,display: block;并且父布局不能设置高度
        这里学的不是很明白！！！！！！！！！！！！！！！！还要看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .conter1::after{
            content: "";
            display: block;
            clear: both;
        }
        .conter2{
            width: 400px;
            height: 400px;
            border: 6px solid red;
            background-color: green;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: right;
        }
    </style>
</head>
<body>
    <!--如果父元素出现了高度塌陷就直接给父元素设置高度就不会出现这个问题了-->
    <p>这是塌陷的情况</p>
    <div class="conter1">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>这是不塌陷的情况</p>
    <div class="conter2">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>


    <!--
        清除浮动
        1.clear:left清除左浮动，right清除右边浮动

        2.使用overflow清除浮动,如果又服既元素塌陷，并且同级元素也受到了影响
        可以使用overflow清除浮动。这种情况下，父级元素不能设置高度。
        overflow:hidden并且同时增加clear:both(使用率比较高)

        3.伪对象,如果有父级元素塌陷可以给父标签
        增加content设置为空，同时clear:both,display: block;并且父布局不能设置高度
        这里学的不是很明白！！！！！！！！！！！！！！！！还要看

    -->
</body>
</html>