1.为第一个浮动元素的父级元素设置高度。我们知道浮动对造成原来布局变化的原因就是，子元素的脱标。导致父元素的高度坍塌。所以那，我们为父元素设置了高度就可以避免脱标带来的影响。上代码：
效果如下：
拓展：在进行练习的时候，犯了一个错误。我用p标签取包裹了div标签。导致生成的网页，有两个p标签的宽度。查阅得知
内联元素可以嵌套内联元素，块级元素可以嵌套部分块级元素并也能嵌套内联元素，但内联元素不能嵌套块级元素。
块级元素为block，内联元素为inline，拥有“inline”特性的同时又拥有“block”的特性称为replace元素。
也就是说，在p标签开始，遇到《div》标签后网页会认为p已经结束，从而一个完整的p标签样式出现。在内容结束后，会遇到</p>。这时又会添加一个p标签的样式。
2.内墙法
在第一个浮动元素的父元素标签最后，添加一个标签来做墙，撑起即将坍塌的父元素。
3.伪标签法；
这个方法和上面的内墙法异曲同工，所以把它放在了这个位置。
因为在H5中讲究样式和结构的设计分开，而css就是专门用来设置样式的。所以在css中用伪标签来进行设置更符合桂法。
4.外墙法，
1 <style> 2 *{ 3 margin: 0px; 4 padding: 0px; 5 } 6 .box1{ 7 /* height: 20px;*/ 8 background-color: red; 9 } 10 .box2{ 11 float: left; 12 height: 20px; 13 background-color: burlywood; 14 clear: both; 15 } 16 .a{ 17 float: left; 18 height: 20px; 19 background-color: blue; 20 } 21 .box3{ 22 clear: both; 23 visibility: hidden; 24 overflow: hidden; 25 } 26 27 </style> 28 </head> 29 <body> 30 <div class="box1"> 31 <p class="a">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p> 32 <!-- <p class="b"></p>--> 33 </div> 34 <div class="box3"></div> 35 <div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div> 36 37 </body>
5.在后面的盒子里加上clear：both属性。