解决高度坍塌

最新推荐文章于 2024-08-25 21:41:11 发布

qq_41915843

最新推荐文章于 2024-08-25 21:41:11 发布

阅读量77

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_41915843/article/details/112685990

版权

文章探讨了CSS中浮动元素导致的高度坍塌问题，以及如何通过设置父元素浮动、指定固定高度或使用清除浮动的CSS方法来解决这个问题。示例代码演示了如何使用`:after`伪元素实现清除浮动，确保内容正确布局。

摘要由CSDN通过智能技术生成

清除浮动带来的影响（高度坍塌）

 元素设置浮动之后，被设置浮动的元素就会脱离文档流，而且任何元素都会浮动，然后称为**块级元素**，浮动之后对我们的布局是有很大的影响，会造成高度坍塌。
 解决高度坍塌的方法：
 还有其他方法，这里就不一一列举，主要介绍利用css来解决高度坍塌的问题
 1.给父元素也设置浮动，要浮动一起浮动
 2.给父元素设置高度
 3.高度坍塌毕竟是css自己的问题，所以还是由css自己来解决吧，来看代码

<body>
  <style>
    .clearfloat>div{
       width: 100px;
       height: 100px;
    }
  .clearfloat>div:first-child{
      float: left;
      border: 1px solid rebeccapurple
  }
  .clearfloat>div:last-child{
      float: left;
      border: 1px solid rgb(3, 1, 15)
  }
  .d3{
    width: 300px; 
    height: 200px;
    color: rgb(22, 3, 3);
    border: 2px solid black
  }
   .clearfloat::after{/*在父元素上添加:after*/
    display: block;/*添加一个块级元素在父元素的直接子元素后边*/
    content: "";/*给块级元素的内容设置为空*/
    clear: both;/*清楚所有的浮动*/
  }
  </style>
  <div class="clearfloat">
    <div>浮动框1</div>
    <div>浮动框2</div>
  </div>
  <div class="d3">框3</div>
</body>

这是没有清楚浮动的效果
没有清除浮动的时候
默认文档流定位是
①每个元素在页面占据空间
②每个元素都从父元素的左上角开始显示
③块级元素独占一行，从上往下排列
④行内和行内块，多个元素共用一行，从左往右排列，一行排不下，自动换行

浮动之后框3直接压在浮动框1和浮动框2的下边（都是块级元素，如果框3没有浮动应该在浮动框1和2的下边）
清除浮动后的效果：
在这里插入图片描述
[因为是小白，写的有点菜，有错误的话，请大家指正]

qq_41915843

关注

0
点赞
踩
0

收藏

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

清除浮动带来的影响（高度坍塌）元素设置浮动之后，被设置浮动的元素就会脱离文档流，而且任何元素都会浮动，然后称为块级元素，浮动之后对我们的布局是有很大的影响，会造成高度坍塌。解决高度坍塌的方法：还有其他方法，这里就不一一列举，主要介绍利用css来解决高度坍塌的问题1.给父元素也设置浮动，要浮动一起浮动2.给父元素设置高度3.高度坍塌毕竟是css自己的问题，所以还是由css自己来解决吧，来看代码...
复制链接

扫一扫