当前位置： 移动技术网 > IT编程>网页制作>CSS > 多个div同行显示实现方式、浮动会导致父元素高度坍塌问题解决方案

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

2018年03月13日  | 移动技术网IT编程  | 我要评论

实现方式

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网