HTML浮动导致高度塌陷,浮动元素特性（解决高度塌陷问题）

浮动的特性

.outer{

border: 10px solid tomato;

/* BFC Bolck Formatting Context 块级格式化环境

BFC是CSS中一个隐藏的属性，开启BFC后会使变成一个独立的布局区域

开启BFC后的特点：

1.开启BFC的元素不会被浮动元素覆盖

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

3.开启BFC的元素可以包含浮动的子元素

可以通过一些设置来开启元素的BFC

1.可以给父元素设置高度(不推荐，一般来说父元素的高度是由子元素内容的高度撑开的，不容易设置这个值)

2.给父元素和父元素后的元素也设置浮动(不推荐，设置了浮动后影响就更大了)

3.将元素设置为行内块元素(不推荐)

4.将元素的overflow设置为一个非visible的值(推荐使用，影响最小)  一般使用( overflow: hidden;)

*/

/* 开启元素的BFC，解决高度塌陷问题 */

overflow: hidden;

}

.inner{

float: left;

background-color: pink;

height: 100px;

width: 100px;

}

.other{

background-color: teal;

height: 200px;

width: 200px;

}