关于BFC的问题

最新推荐文章于 2023-06-05 20:14:58 发布

偶吼吼吼

最新推荐文章于 2023-06-05 20:14:58 发布

阅读量169

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_45814232/article/details/109276876

版权

BFC解决的问题：
1.margin塌陷
2.margin合并

BFC产生条件：
1.position:absolute;
2.display:inline-block;
3.float:left/right;
4.overflow:hidden;

margin塌陷问题：
子盒子中margin-top失效
代码如下：

<style type="text/css">
    .box {
      margin-top: 100px;
      margin-left: 200px;
      height: 200px;
      width: 200px;
      background-color: #333333;
    }
    .box1 {
      margin-left: 50px;
      margin-top: 50px;
      height: 50px;
      width: 50px;
      background-color: khaki;
    }
  </style>
</head>

<body>
<div class="box">
  <div class="box1"></div>
</div>
</body>

效果图：
在这里插入图片描述
子盒子中设置了margin-top但是失去效果(类似于上边的margin塌陷了)

解决办法；触发BFC；
代码：

<style type="text/css">
    .box {
      margin-top: 100px;
      margin-left: 200px;
      height: 200px;
      width: 200px;
      background-color: #333333;
      /*position:absolute;*/
      /*display:inline-block;*/
      /*float:left/right;*/
      overflow:hidden;
    }
    .box1 {
      margin-left: 50px;
      margin-top: 50px;
      height: 50px;
      width: 50px;
      background-color: khaki;
    }
  </style>
</head>

<body>
<div class="box">
  <div class="box1"></div>
</div>

效果图：
在这里插入图片描述

触发BFC的同时有可能带来其他问题，所以需要选择当前场景下合适的方式触发

偶吼吼吼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于BFC的问题

BFC解决的问题：1.margin塌陷2.margin合并BFC产生条件：1.position:absolute;2.display:inline-block;3.float:left/right;4.overflow:hidden;margin塌陷问题：子盒子中margin-top失效代码如下：<style type="text/css"> .box { margin-top: 100px; margin-left: 200px;
复制链接

扫一扫