多个div同行显示实现方式、浮动会导致父元素高度坍塌问题解决方案

实现方式

实现多个p同一行显示，可以借助CSS的float样式实现。 float浮动原理： 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素

上述实现方式存在的问题

浮动会导致父元素高度坍塌

情景：当我们需要把在同一行显示的多个子p放到父p容器中的时候，会发现子p并不能在父p中撑开父p，而是跑到父p外面去了。（可以自己给父子p加边框样式验证看看） 原因：父元素中存在子元素的float不为none，并且父元素的height未设置即auto或者有浮动的子元素发生了溢出的时候，就会出现父元素的高度塌陷。

解决方案

① 选中父元素，给父元素设置添加一个class ② 根据class属性选中父元素，为其设置如下样式

//全浏览器通用的解决父p高度坍塌方案
.clearfix:before,.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}