父元素高度自适应，子元素浮动，引起的高度塌陷问题

最新推荐文章于 2022-07-10 20:22:43 发布

luben_jack

最新推荐文章于 2022-07-10 20:22:43 发布

阅读量489

点赞数

本文链接：https://blog.csdn.net/luben_jack/article/details/78418215

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父元素高度自适应，子元素浮动，引起的高度塌陷问题</title>
    <style>
       /*方法一，给父元素添加overflow：hidden 推荐使用*/
       .div1{
          background: pink;
          border: 1px solid red;
          overflow: hidden;
       }
       .div2{
          background: #800080;
          border: 1px solid red;
          height: 100px;
          margin-top: 10px;
       }
       .left{
          float: left;
          width: 20%;
          height: 300px;
          background: #DDD;
       }
       .right{
          float: right;
          width: 30%;
          height: 80px;
          background: #DDDDDD;
          
       }
       
       /*.clear{
          clear: both;
       }*/
       /*方法三：给父元素之后添加after，不推荐使用太麻烦*/
       /*.clear:after{
          display: block;
          clear: both;
          content: "";
          visibility: hidden;
          height: 0;
       }*/
       </style>
</head>
<body>
<div class="div1 clear">
   <div class="left">left</div>
   <div class="right">right</div>
   <!--方法二：给子元素后面添加一个div，设置clear：both-->
   <!--<div class="clear"></div>-->
</div>


<div class="div2">
   nihao
</div>

</body>
</html>

luben_jack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父元素高度自适应，子元素浮动，引起的高度塌陷问题

html>html lang="en">head> meta charset="UTF-8"> title>父元素高度自适应，子元素浮动，引起的高度塌陷问题title> style> /*方法一，给父元素添加overflow：hidden 推荐使用*/ .div1{ background: pink;
复制链接

扫一扫