浮动与内外边距合并

浮动

div元素在一行显示,可以有哪些方式:

1、display:inline-block 行块元素

2、父元素添加弹性盒子 display:flex

3、浮动 float

特性:可以提升半个层级(盒子可以抬起,但是文字没办法)

浮动的元素,要么碰到盒子的边框;要么碰到另外一个浮动框,也会停止

会影响后面元素的排放

作用:是让元素靠左或者靠右排放

float:left;

float:right;

在元素浮动时，因为提升半个层级，脱离了文档流，下面的元素会向上移动

而我们通常会在浮动过后使得下面的元素可以正常排列，这就需要下面的方式

清除浮动带来的影响

clear:both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            background-color: red;
            /* 左浮动 */
            float: left;
        }
        .two{
            background-color: green;
            float: left;
        }
        .three{
            background-color: rgb(143, 143, 230);
            /* 右浮动 */
            float: right;
        }
        .four{
            width: 500px;
            height: 100px;
            background-color: aquamarine;
        }
        .clear{
        /* 清除浮动影响 */
            clear: both;
            width: 0;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="clear"></div>
    <div class="four"></div>
    /* 说明：在上面的元素（不一定是div）进行浮动时，下面的元素会向上移动 */
    /* 这时添加一个宽0高0的空盒子进行清除浮动，这样，clear下面的元素就会正常排列 */
    <div class="clear"></div>
</body>
</html>

父元素高度塌陷（这是由浮动带来的问题，所以这两个方法也可以解决浮动影响）

解决方案:

1、给父元素添加定高

2、给父元素添加overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            /* height: 100px; */
            border: 1px solid rgb(139, 247, 129);
            /* overflow: hidden; */
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            background-color: rgb(192, 149, 149);
            float: right;
        }
        .main{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="main"></div>
</body>
</html>

外边距合并

1、外边距合并

当两个兄弟元素,上一个兄弟设置margin-bottom，下一个兄弟设置margin-top，这时会发生外边距合并，其px值使用的是两个元素中的最大值