如何解决高度塌陷

如何解决高度塌陷

在浮动布局中，当子元素设置为float:时候，父元素就将失去高度，如下：

最完美解决办法：

在浮动元素（j就是失去高度的元素）后面添加一个伪元素，在css中的写:选择器::after{content:''; display:block;clear：both;

点击查看代码

选择器::after{content:''; display:block;clear：both;}

由于after默认的是行内元素，所以要将其变成块状元素。content:’’也一定要写；

---

如果已经解决了你的问题，稍等：


.如果想要在子元素设置margin-top：10px发现是父元素也将被赋予这个属性，解决这种情况的方法是：
在子元素中加入伪类元素::before{content:””;}如果“”不写东西，是不起效果的，但是如果写了就会溢出，所以在后面加display:”table”;table不占空间，而且还会起到一定的作用。

出现上述两种情况可以简写为：

点击查看代码

.clearfix::before,
.clearfix::after{
    content:'';
    display: table;
    clear: both;
}

---

解决第一个问题的时候，实际上是通过一些方式开启BFC（Block formatting context块级格式化环境）；
方式有：
   1.设置元素的浮动；
   2.将元素设置为行内块（不推荐）；
   1.将元素设置Overflow:hidden;
这些也可以使其包含元素。