css解决高度塌陷

最新推荐文章于 2024-05-20 22:08:52 发布

认真的Yu

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量77

点赞数 1

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_45672865/article/details/119711737

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css解决高度塌陷

1.为父元素开启BFC
2.利用伪类清除浮动

解决css中浮动出现的高度塌陷问题，首先，不解决高度塌陷的效果：

 	* {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 200px;
        border: 6px solid red;
      }
      .flot {
        float: left;
        width: 100px;
        height: 100px;
        background-color: slateblue;
      }

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

高度塌陷

1.为父元素开启BFC

.box1 {
        width: 200px;
        border: 6px solid red;
        overflow: hidden;  //开启BFC
      }

2.利用伪类清除浮动

 .box1 {
        width: 200px;
        border: 6px solid red;
      }
      .box1::after {
        content: '';
        display: table;
        clear: both;
      }

解决后的效果：
解决高度塌陷

认真的Yu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css解决高度塌陷

css解决高度塌陷1.为父元素开启BFC2.利用伪类清除浮动解决css中浮动出现的高度塌陷问题，首先，不解决高度塌陷的效果： * { margin: 0; padding: 0; } .box1 { width: 200px; border: 6px solid red; } .flot { float: left; width: 100px;
复制链接

扫一扫