如何开启BFC模式

开启BFC可以解决父元素塌陷问题

1.可以使用float:left,但是子元素的宽度也回随之消失，不推荐
2.可以使用display-inline-block,同样子元素宽度也会消失，不推荐
3.可以使用overflow:hidden,代价最小，子元素宽度也不会缺失，我也不知道为啥
4.可以给子元素添加兄弟元素，然后设置clear:both，帮它顶上去

解决兄弟元素塌陷的问题

加一个clear:left或者clear:both,同样不知道为啥
谁能解答解

.box{
    border: 10px solid red;
    overflow: hidden;
}

.inner{
    width: 100px;
    height: 100px;
    background-color: aqua;
    float: left;
}

.inner1{
	clear:both
}

<div class="box">
        <div class="inner"></div>
         <!-- <div class="inner1"></div> -->
    </div>