您现在的位置：首页 >> 前端 >> 内容

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

时间：2018/2/5 15:15:21 点击：

　　核心提示：实现方式实现多个p同一行显示，可以借助CSS的float样式实现。 float浮动原理：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素上述实现方式存在的问题浮动会导致父元素高...

实现方式

实现多个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;
}