clearfix
.out{border:5px solid #F00; width:500px;}
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}
<p class="out">
<p class="inner1">123</p>
<p class="inner2">456</p>
</p>
这样写出来的代码.out是不能被撑开。
①.clearfix::after { /*“clearfix”的元素内最后面加入内容；*/
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/display: block; /*加入的这个元素转换为块级元素。*/
clear: both; /*清除左右两边浮动。*/
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；*/
height: 0; /*高度为0；*/
font-size:0; /*字体大小为0；*/
}
②加一个
<p style=" clear:both"></p>
相关阅读
一、浮动的概念 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中
在很多开发过程中，常常会用到浮动流来弥补标准流布局所难以实现或者不合适的缺陷。但如果一味地使用浮动流进行布局，其产生的副作用