Question

案例： div div 。

当包含一些文本的子div使用CSS3 float属性浮动到左边时，父div的高度变为零。

是什么导致此问题和任何解决方案？

注意：div的大小是百分比（％）。

Answer 1

浮动一个元素会将其从正常的元素流中取出，其中一个副作用是它将不再影响其父元素的dinensions。

清除float的最简单方法是将父级overflow属性设置为hidden。

但是，这可能是不合需要的，因为你可能在你需要的父级中嵌套了要溢出它的元素。在这种情况下，使用:after伪元素清除浮动元素。

.parent:after{
    clear:both;
    content:"";
    display:block;
    height:0;
}

第三个解决方案是简单地在浮动元素后面给一个兄弟clear属性，但显然取决于你的布局和标记。

顺便说一下，float不是CSS3属性，它已经存在了一段时间。