关于子元素浮动引起的父元素高度问题

最新推荐文章于 2021-06-19 02:05:01 发布

weixin_44343449

最新推荐文章于 2021-06-19 02:05:01 发布

阅读量871

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44343449/article/details/93193736

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

当父元素的所有子元素都浮动时，子元素高度会为0。
解决：
1：设置父元素的高度height（如果父元素高度固定，可使用。）
2：父元素设置为浮动（不推荐）
3：父元素的overflow属性设置为hidden。（如果没有元素需要隐藏，可以使用。）
4：在子元素后追加元素如<p style = "clear:both"></p>(推荐)
5：

 <style>
    .ch1,.ch2{
      width:100px;
      height:100px;
      float:left;
    }
    .ch1{
      background: red;
    }
    .ch2{
      background: green;
    }
    .parent{
      border:1px solid #ddd;
    }
    .parent:after{
      content:"";
      display:block;
      clear:both;
    }
  </style>

<body>
  <div class = "parent">
    <div class="ch1"></div>
    <div class="ch2"></div>
  </div>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_44343449

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于子元素浮动引起的父元素高度问题

当父元素的所有子元素都浮动时，子元素高度会为0。解决：1：设置父元素的高度height（不推荐）2：父元素设置为浮动（不推荐）3：父元素的overflow属性设置为hidden。（如果没有元素需要隐藏，可以使用。）4：在子元素后追加元素如<p style = "clear:both"></p>(推荐)...
复制链接

扫一扫