html/css-margin塌陷解决以及bfc触发

最新推荐文章于 2024-07-17 12:03:48 发布

Fly_Fly_Zhang

最新推荐文章于 2024-07-17 12:03:48 发布

阅读量660

点赞数 2

分类专栏：前端文章标签：如何解决margin塌陷如何触发bfc 几种触发bfc方式的优缺点

本文链接：https://blog.csdn.net/Fly_Fly_Zhang/article/details/88419056

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

什么是margin塌陷：当两个盒子嵌套时，我们调整子盒子在父盒子中的位置，左右使用margin-left/margin-right 就可以变换左右位置，但是使用margin-top时，子盒子在父盒子中的相对位置并没有发生变化，并且当子盒子的值超过父盒子和网页顶端的距离时，子盒子会带着父盒子一起移动。

发生margin塌陷代码：

html:下面所有实例html代码相同，所以只在此处展示：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <link rel="stylesheet" type="text/css" href="test.css" >
</head>
<body>
   <div class="wrapper">
        <div class="content"></div>
   </div>
</body>
</html>

css 代码：

*{
    padding:0px;
    margin:0px;
}
.wrapper{
    margin-left:100px;
    margin-top:100px;
    width:100px;
    height:100px;
    background-color:black;
}
.content{
    width:50px;
    height:50px;
    background-color:blueviolet;
    margin-left:50px;
    /*margin-top:150px; /*子盒子带动父盒子移动*/
    margin-top:50px;/*子盒子并没有发生移动*/
}

发生margin塌陷示意图：

margin塌陷

margin塌陷可以用bfc触发解决：只要父盒子有下面任意一项代码，都可以触发bfc并且解决margin塌陷；

position ：absolute ; //进行定位（如果后面的元素只想按照顺序摆在它下面，那就不能用定位，一用下面的盒子就会上浮）
display : inline-block ; //设置行级块元素（）
overflow : hidden; //隐藏子盒子溢出父盒子部分（如果本身内容就想溢出盒子，那就不能使用它触发）
float : left / right: //定义元素往哪个方向浮动

解决代码演示：只演示一种，其它几种方式代码一样；

*{
    padding:0px;
    margin:0px;
}
.wrapper{
    margin-left:100px;
    margin-top:100px;
    width:100px;
    height:100px;
    background-color:black;
    position:absolute;/*触发bfc*/
}
.content{
    width:50px;
    height:50px;
    background-color:blueviolet;
    margin-left:50px;
    /*margin-top:150px; /*子盒子带动父盒子移动*/
    margin-top:50px;/*子盒子并没有发生移动*/
}