<style>
.newbfc{
overflow: hidden;
}
</style>
<div class="container1">
<div class="sub1">String1</div>
<div class="newbfc"><div class="sub1">String2</div></div>
</div>2.清除浮动：
问题：当元素的子元素都浮动后，会出现高度坍塌的现象，即父容器的高度不会被撑开
代码：
<style>
.pre2{
width: 200px;
border: 2px solid red;
}
.float1,.float2{
width: 100px;
height: 100px;
float: left;
}
.float1{
background-color: #dee;
}
.float2{
background-color: #dcc;
}
</style>
<div class="pre2">
<div class="float1"></div>
<div class="float2"></div>
</div>解决方法：
bfc的规则：计算BFC的高度时，浮动元素也参与计算所以只要将父容器设置为bfc就可以把子元素包含进去：
这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。
.pre2{
width: 200px;
border: 2px solid red;
/* 设置overflow*/
overflow:hidden;
}3.解决布局：防止文字环绕
代码：
<style>
.container2{
overflow: hidden;
width: 200px;
}
.box{
float: left;
width: 100px;
height: 30px;
background-color: #daa;
}
</style>
<div class="container2">
<div class="box"></div>
<p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd fsdsdfsdf fffffff</p>
</div>这个p元素并没有移动，但是它却出现在浮动元素的下方。p元素的line boxes（指的是文本行）进行了移位。此处line boxes的水平收缩为浮动元素提供了空间。
bfc的规则：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
解决这个问题只要将p元素添加overflow：hidden使其成为一个新的bfc就可以了
