                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /HTML5和CSS3扁平化风格博客

请求讲解清除浮动的部分

请问这里的

.article-preview > div{ /*如果子元素【有或者没有】左飘的话，对子元素或者父元素会造成什么影响？*/
float:left
}

所有子元素浮动向左了为什么会造成背景成空白？

.article-preview:after{
content:''; /*已了解：最后的内容显示*/
display:block; /*这里造成什么效果？没有这个代码为什么也会让背景成空白？对子元素或者父元素会造成什么影响或者产生什么效果？*/
clear:both;/*没有这个代码也会让背景成空白？为什么呢？对子元素或者父元素会造成什么影响？*/
}

07:15

brantyo

2017-04-20

源自：HTML5和CSS3扁平化风格博客 3-6

关注问题我要回答

1061

操作

收起

1 回答

给我一杯咖啡
2017-04-27

如果所有子元素都浮动，则父级盒子中的所有内容均脱离标准文档流，此时的父级盒子里面相当于没有内容，因为都飘离文档流了，也就是说父级盒子的高度为零，则呈现网页本身（body）的白色，设置了clear:both清除浮动之后，相当于此时的子元素拥有浮动属性可以并排显示，但并没有脱离标准文档流，即填充了整个父盒子。

除了clear:both清除浮动解决浮动塌陷这种情况外，还可以给父盒子设置一个合理的高度，也可以解决浮动塌陷，不会出现您如上背景变为白色的情况。