首先我們要說一下浮動帶給我們的問題：如果父元素沒有設定固定高度那麼當子元素設定浮動時父元素不會被撐開，很明顯這會影響我們的佈局

效果如下：

1、第一種方法：after偽元素（推薦使用）

給浮動元素的父元素新增類名clearfix並設定clearfix的css

/*第一種方法：after偽元素 推薦使用這種方法*/
.clearfix:after{
content:"";
display:block;
clear:both;
visibility: hidden;
line-height:0;
font-size:0;
}
.clearfix{
zoom:1;//相容ie6
}
.box{
width:500
 
px;
border:1px solid green;
margin:100px auto;
}
.floatBox{
width:200px;
height:200px;
float:left;
background:#fec9c9;
}

<div class="box clearfix">
    <div class="floatBox">1</div>
</div>

2、第二種方法：br標籤清除浮動，設定空標籤方法與這個類似，就是把br標籤換成一個div類名為clear然後clear:both

/*第二種方法：br標籤清除浮動，設定空標籤方法與這個類似，就是把
 
br標籤換成一個div類名為clear然後clear:both*/
.box1{
width:500px;
border:1px solid green;
margin:100px auto;
}
.floatBox1{
width:200px;
height:200px;
float:left;
background:#009f95;
}
.clear{
clear:both;
}

<div class="box1">
    <div class="floatBox1">2</div>
    <br class="clear">
</div>

/*
 
第三種方法，父元素設定overflow:hidden*/
.box2{
width:500px;
border:1px solid green;
margin:100px auto;
overflow:hidden;
}
.floatBox2{
width:200px;
height:200px;
float:left;
background:#6dcfb8;
}
/*第四種方法：父元素設定overflow:auto;*/
.box3{
width:500px;
border:1px solid green;
margin:100px auto;
overflow:auto;
}
.floatBox3{
width:200px;
height:200px;
float:left;
background:#f2947a;
}
/*第五種方法：父元素設定display:table*/
.box4{
width:500px;
border:1px solid green;
margin:100px auto;
display:table;
}
.floatBox4{
width:200px;
height:200px;
float:left;
background:#ff00ff;
}

<div class="box2">
    <div class="floatBox2">3</div>
</div>
<div class="box3">
    <div class="floatBox3">4</div>
</div>
<div class="box4">
    <div class="floatBox4">5</div>
</div>