解决高度塌陷--父元素未被子元素撑开问题，外边距重叠问题

文章目录

• 前言
• 一、解决办法是什么？
• 二、某些方法不推荐的原因
  • 1.某些方法不推荐的原因
  • 2.什么是BFC?
• 总结

---

前言

什么是高度塌陷？

高度塌陷是指当子元素设置浮动后，导致子元素脱离文档流，无法撑起父元素的高度，下方元素自动上移，造成页面布局混乱

其中a是父元素，b是子元素（且设置浮动）

---

一、解决办法

---

办法一：父元素同样设置浮动  例如：.a{float:left}  其中a为父元素----->不推荐，原因在下一个模块解释

---

办法二：为父元素添加overflow：hidden(其实非visible，都可以，也可以是 auto) --->不推荐

---

办法三：使用clear:both清除浮动：------>不推荐

           在浮动元素的后面添加一个标签（例如p标签），为这个标签添加一个css属性{clear:both}

---

办法四：使用伪元素清除浮动（推荐） 

<div class="clearfix">

<img src="images/1.jpg"/>

<img src="images/2.jpg"/>


</div>

.clearfix:after{content:'';display:block;clear:both;}

            

二、某些方法不推荐的原因

1.某些方法不推荐的原因

办法一：父元素同样设置浮动 ：由于需求者父元素不一定是要求浮动到左边或者右边，会影响布局

办法二：为父元素添加overflow ：子元素不能添加定位，否则会被隐藏。还是由于使用的某些方法带来的副作用

办法三：使用clear:both清除浮动：无缘无故增加了一个标签，这种方式并不建议用，会产生大量的空元素

办法四：使用伪元素清除浮动（推荐） ：给文档添加一个虚拟的元素，可以指定添加到一个元素前面或者后面。原理其实和办法三是一样的，但是这个方法并不会产生大量的空元素

2.什么是BFC?

        BFC(Block Formatting Context)  块级格式化环境

      BFC是css中的一个隐含属性，可以为一个元素开启BFC，开启BFC后该元素变成了一个独立的布局区域

BFC的特点：

        1.开启BFC的元素不会被浮动元素所覆盖（兄弟元素之间若上方是设置浮动的，下面的会被盖住）

        2.开启BFC的元素子元素和父元素外边距不会重叠

        3.开启BFC的元素可以包含浮动的子元素（子元素可以撑开父元素的高度了）

            实际上，上面的办法是开启了BFC，才解决了高度塌陷的问题

3.最完美的解决方式，不仅能解决外边距重叠问题还能解决高度塌陷

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

<div class='box1 clearfix'>
·····
</div>