码迷,mamicode.com
首页 > Web开发 > 详细

CSS - 正确解决 float 高度坍塌的问题

时间:2020-07-19 16:05:34      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:overflow   sky   class   补充   after   hidden   color   灵活   char   

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>正确解决高度塌陷</title>
  <style media="screen">
    .box {
      border: 1px solid;
    }

    .float {
      width: 100px;
      height: 100px;
      background: skyblue;
      float: left;
    }

    .clearfix:after {
      content:‘‘;
      clear: both;
      display:block;
    }
  </style>
</head>

<body>
  <div class="box clearfix">
    <div class="float">
    </div>
  </div>
</body>

</html>

 

补充:

一, float 使父元素高度坍塌的原因 :

  子元素使用 float 后,使其脱离文档流 。 使父元素检测不到其尺寸。

二,5种解决方案 :

1,为父元素设置高度 , 缺陷是 :不灵活

2,为父元素设置 float ,   缺陷是 :使父元素也脱离,没有真正解决

3,为父元素设置 overflow:hidden , 缺陷是 :会隐藏相关的元素

4,子元素后面添加 一个 clear:both 的 兄弟元素 , 缺陷是 : 使 html 添加了一个多余的结构

5,为父元素添加一个 content:"";clear:both;display:block 的伪类 。 ( 可取 )

CSS - 正确解决 float 高度坍塌的问题

标签:overflow   sky   class   补充   after   hidden   color   灵活   char   

原文地址:https://www.cnblogs.com/500m/p/13339202.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!