                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1084

操作

收起

1 回答

給我一杯咖啡
2017-04-27

如果所有子元素都浮動，則父級盒子中的所有內容均脫離標準文檔流，此時的父級盒子里面相當于沒有內容，因為都飄離文檔流了，也就是說父級盒子的高度為零，則呈現網頁本身（body）的白色，設置了clear:both清除浮動之后，相當于此時的子元素擁有浮動屬性可以并排顯示，但并沒有脫離標準文檔流，即填充了整個父盒子。

除了clear:both清除浮動解決浮動塌陷這種情況外，還可以給父盒子設置一個合理的高度，也可以解決浮動塌陷，不會出現您如上背景變為白色的情況。